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请 耐心 等 待 或 者 刷新 重 试 
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请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


加 载 中 


请 耐心 等 待 或 者 刷新 重 试 


12.3.1 行为 概述 


行为 是 指 在 某 种 事件 的 触发 下 ， 通 过 一 定 的 过 程 来 达到 某 种 目的 。 如 用 户 在 浏览 网 页 
时 单 击 ( 这 是 触发 事件 ) 某 超级 链接 ， 然 后 浏览 器 就 打开 了 一 个 对 话 框 ( 这 就 是 要 达到 的 
目的 ， 通 过 执行 JavaScript 代码 来 实现 这 一 目的 )， 这 就 是 一 个 完整 的 行为 。 

行为 由 动作 和 事件 两 部 分 组 成 , 动作 控制 何 时 执行 ( 如 单 击 时 开始 执行 等 ), 事件 控制 
执行 的 内 容 ( 如 弹出 对 话 框 显示 提示 信息 等 )。 

每 个 浏览 器 都 提供 一 组 事件 ， 不 同 的 浏览 器 有 不 同 的 事件 ， 但 常用 的 事件 大 部 分 的 浏 
览 器 都 支持 。 常 用 的 事件 及 作用 说 明 如 下 。 
onLoad: 当 载 入 网 页 时 触发 。 
onUnload: 当 用 户 离开 页 面 时 触发 。 
onMouseOver: 当 和 鼠标 指针 移入 指定 元 素 范围 时 触发 。 
onMouseDown: 当 用 户 按 下 鼠标 左 键 但 没有 释放 时 触发 。 
onMouseUp: 当 用 户 释放 鼠标 左 键 后 触发 。 
onMouseOut: 当 息 标 指针 移出 指定 元 素 范围 时 触发 。 
onMouseMove: 当 用 户 在 页 面 上 拖 动 鼠标 时 触发 。 
onMouseWheel: 当 用 户 使 用 鼠标 滚轮 时 触发 ， 适 用 于 IE 6。 
onClick: 当 用 户 单 击 了 指定 的 页 面 元 素 ， 如 链接 、 按 钮 或 图 像 映像 时 触发 。 
onDblClick: 当 用 户 双击 了 指定 的 页 面 元 素 时 触发 。 
onKeyDown: 当 用 户 按 下 任意 一 键 时 ， 在 没有 释放 之 前 触发 。 
onKeyPress: 当 用 户 按 下 任意 一 键 ， 然 后 释放 该 键 时 触发 。 该 事件 是 onKeyDown 
和 onKeyUp 事件 的 组 合 事件 。 
onKeyUp: 当 用 户 释 放 了 被 按 下 的 键 后 触发 ， 适 用 于 IE6、IE5.5、IE5 和 IE4。 
onFocus: 当 指 定 的 元 素 ( 如 文本 框 ) 变 成 用 户 交 互 的 焦点 时 触发 。 
onBlur: 和 onFocus 事件 相反 ， 当 指定 元 素 不 再 作为 交互 的 焦点 时 触发 。 
onAfterUpdate: 当 页 面 上 绑 定 的 数据 元 素 完成 数据 源 更 新 之 后 触发 。 


张 


数据 源 更 新 之 前 触发 。 

onError: 当 浏 览 器 载 入 页 面 或 图 像 发 生 错误 时 触发 。 
onFinish: 当 用 户 在 选择 框 元 素 的 内 容 中 完成 一 个 循环 时 触发 。 
onHelp: 当 用 户 选择 浏览 器 中 的 “帮助 ”菜单 命令 时 触发 。 
onMove: 当 浏 览 器 窗口 或 框架 移动 时 触发 。 


12.3.2 ”认识 “行为 ”面板 


Dreamweaver CS6 中 内 置 了 许多 行为 ， 网 页 设计 者 都 可 在 “行为 ”面板 中 对 其 进行 添 
加 与 编辑 。 只 需 选 择 【 窗口 ] /【 行为 】 命令， 或 按 “ShifttrF4” 快 捷 键 即 可 打开 “行为 ” 


天 


在 “行为 ”面板 中 可 以 查看 Dreamweaver CS6 中 包含 的 行为 和 事件 。 
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于 i | 


面板 ， 如 图 12-29 所 示 。 
“行为 ”面板 中 各 按钮 的 功能 如 下 。 


加 按钮， 单 击 该 按钮 ， 只 显示 已 设置 的 事件 列表 。 |B 
国 按钮 : 单 击 该 按钮 ， 显 示 所 有 事件 列表 。 a 
按钮 : 单 击 该 按钮 ， 会 弹出 “行为 ”菜单 ， 在 其 | Sa 下 信 
中 可 进行 行为 的 添加 操作 。 


国 按 钮 : 单 击 该 按钮 ， 可 进行 行为 的 删除 。 — 
人 ^ 按钮: 单 击 该 按钮 ， 将 向 上 移动 所 选择 的 动作 。 图 12-29 “行为 ”面板 
若 该 按钮 为 灰色 ， 则 表示 不 能 移动 。 

~ 按钮 : 单 击 该 按钮 ， 将 向 下 移动 所 选择 的 动作 。 


12.3.3 ”添加 行为 


在 Dreamweaver CS6 中 添加 行为 的 方法 很 简单 ， 只 需 打 开 “ 行 为 ”面板 , 单 击 因 按钮 ， 
在 弹出 的 下 拉 菜单 中 选择 需要 添加 的 行为 ， 并 在 打开 的 对 话 框 中 进行 相应 的 设置 即 可 。 完 
成 后 行为 将 显示 在 “行为 ”面板 中 。 此 时 ， 行 为 所 对 应 的 事件 是 系统 默认 的 ， 用 户 可 在 事 
件 的 下 拉 列 表 框 中 选择 对 应 的 选项 ， 如 图 12-30 所 示 。 
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图 12-30 ”添加 行为 


12.3.4 ”修改 行为 


如 果 对 添加 的 行为 不 满意 可 对 其 进行 修改 ， 其 中 包括 事件 的 修改 和 行为 本 身 的 修改 ， 
修改 事件 的 方法 是 : 在 “事件 ”下 拉 列 表 框 中 重新 选择 所 需 的 事件 即 可 。 修 改行 为 本 身 的 
方法 是 : 在 “行为 ”面板 中 选中 要 修改 的 行为 ， 并 双击 ， 将 打开 相应 的 行为 对 话 框 ， 在 其 
中 重新 进行 设置 后 ， 单 击 匡 可 加 按钮 即 可 。 


12.3.5 ”删除 行为 


如 果 已 不 需要 某 种 行为 ， 可 将 其 删除 。 删 除 行为 的 操作 很 简单 ， 只 需 在 “行为 ”面板 
中 选中 要 删除 的 行为 ， 单 击 加 按钮 或 直接 按 “Delete” 键 即 可 。 
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行为 的 添加 方法 相同 ， 但 其 具体 的 操作 却 不 同 ， 用 户 只 需 在 选择 命令 后 ， 按 照 提示 进行 操作 
即 可 。 
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12.4 使 用 Dreamweaver 预 置 的 行为 


了 解 了 行为 的 含义 和 基本 操作 方法 后 ， 就 可 以 通过 行为 来 进行 网 页 的 编 
辑 。 下 面 将 对 行为 的 使 用 方法 进行 介绍 。 


Dreamweaver CS6 自 带 有 大 约 20 多 种 行为 , 为 对 象 添 加 这 些 行为 可 以 使 网 页 产生 各 种 
效果 ， 如 交换 图 像 、 弹 出 信息 等 。 这 些 行 为 的 使 用 方法 十 分 类 似 ， 只 要 在 “行为 ”面板 中 
进行 添加 ， 然 后 按照 提示 进行 对 应 的 操作 即 可 。 

实例 下 > 制作 “照片 展示 ”行为 页 面 @。 

下 面 将 打开 “sunlight” 文 件 夹 中 的 “photo.html” 网 页 ， 在 其 中 以 添加 弹出 信息 、 交 
换 图 像 和 转 到 网 页 等 行为 为 例 ， 讲 解 使 用 Dreamweaver 预 置 行为 的 方法 。 


a 见 ”光盘 \ 素 材 \ 第 12 章 \sunlight\photo.html 
jE 盘 ”光盘 \ 效 果 \ 第 12 章 \sunlight\photo.html > 


国 打 开 网 页 文件 “photo.html"， 选 择 【 窗 口 〗/【 行 为 】 命 令 ， 打 开 “ 行 为 ”面板 ， 单 
击 “添加 行为 ”按钮 国 ， 在 弹出 的 下 拉 菜 单 中 选择 “弹出 信息 ”命令 。 

国 打开 “ 强 出 信息 "对 话 框 ,在 “消息 "文本 框 中 输入 如 图 12-31 所 示 的 文本 , 单 击 医 王 本 
按钮 进行 添加 。 

国运 回 网 页 中 ,在 “行为 ”面板 中 即 可 看 到 添加 的 行为 ， 此 时 “弹出 信息 ”行为 的 默认 
事件 为 “onLoad”， 保 持 该 事件 不 变 ， 使 该 信息 在 网 页 加 载 时 弹出 。 

俩 选择 “photo.html” 网 页 文档 中 表格 中 的 第 1 张 图 片 ， 单 击 “ 行 为 ”面板 中 的 “添加 
行为 ”按钮 国 ， 在 弹出 的 下 拉 菜单 中 选择 “交换 图 像 ” 命 令 。 

国 打 开 “ 交 换 图 像 ” 对话 框 , 保持“ 图像 ”列表 框 中 的 选择 默认 不 变 ， 单 击 国 要 本 按钮 ， 

在 打开 的 “选择 图 像 源 文 件 ”对 话 框 中 选择 “photo_11.jpg” 图 像 ， 单 击 EE 本 本 按钮 ， 


如 图 12-32 所 示 。 


| sd 


通过 “调用 JavaScript” 行 为 ， 可 以 达到 与 “弹出 信息 ”行为 相同 的 效果 。 
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国 喜 日 “交换 图 像 ” 对 话 框 ， 在 “ 设 定 原始 档 为 ”文本 框 中 即 可 看 到 添加 的 图 像 ， 选 中 
团 预先 载 和 图 像 和 回 自 夺 FN 饭 和 图像 复 选 框 ， 单 击 匡 醋 本 按钮， 如 图 12-33 所 示 。 


国 总 日 “行为 ”面板 中 可 查看 添加 的 “交换 图 像 ” 行 为 ， 然 后 使 用 相同 的 方法 ， 为 剩余 
的 3 张 图 片 依 次 添加 “交换 图 像 ” 行 为 , 并 设置 其 交换 的 图 像 分 别 为 “photo_12.jpg”、 
“photo_13.jpg” 和 “photo_14.jpg”。 

国 此 时 可 保存 网 页 ， 按 “F12” 键 在 浏览 器 中 进行 预览 。 当 将 鼠标 移动 到 图 像 上 时 ， 图 
像 变 为 添加 后 的 效果 ， 移 动 鼠标 到 其 他 位 置 ， 则 恢复 原始 效果 ， 如 图 12-34 所 示 。 


图 12-33 “交换 图 像 ” 对 话 框 图 12-34 预览 添加 交换 图 像 后 的 效果 


国 再 选择 第 1 张 图 片 ， 在 “行为 ”面板 中 的 下 拉 菜 单 中 选择 “打开 浏览 器 窗口 ”命令 ， 
打开 “打开 浏览 器 窗口 ”对 话 框 。 

在 “更 显示 的 URL” 文 本 框 中 输入 需要 打开 的 新 页 面 ， 在 “窗口 宽度 ”和 “窗口 高 
度 ” 文本 框 中 设置 窗口 的 大 小 , 在 “属性 ” 栏 中 选中 需要 显示 的 属性 ,在 “窗口 名 称 ” 
文本 框 中 输入 名 称 ， 单 击 EEBEa 按 钮 ， 如 图 12-35 所 示 。 

人 国 使 用 相同 的 方法 依次 为 剩余 的 3 张 图 片 添加 “打开 浏览 器 窗口 ”行为 ， 并 分 别 设置 网 
页 为 “infoyj.html”、“infolw.html” 和 “infosl.html”。 使 其 实现 单 击 图 片 时 ， 打 开 新 
窗口 的 效果 。 

例 此 时 选择 网 页 中 的 图 片 ， 即 可 在 “行为 ”面板 中 查看 其 添加 的 事件 ， 如 图 12-36 所 示 
为 第 1 张 图 片 的 所 有 事件 。 
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图 12-35 “打开 浏览 器 窗口 ”对话 框 图 12-36 查看 事件 
例 完成 后 保存 网 页 并 进行 预览 ， 在 浏览 器 中 可 查看 其 最 终 效 果 ， 如 图 12-37 所 示 . 


添加 “交换 图 像 ”行为 后 ， 会 自动 默认 添加 “恢复 交换 图 像 ”行为 。 
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图 12-37 预览 效果 


12.5 ”应 用 Spry 行为 效果 


Spry 行为 效果 是 特 指 “ 行 为 ”面板 中 下 拉 菜 单 的 “效果 ”命令 中 包含 的 7 
个 行为 。 通 过 这 些 行 为 可 以 增强 静态 网 页 的 视觉 效果 ， 使 信息 保持 高 亮 显 
示 或 创建 动画 过 渡 效 果 等 。 


12.5.1 ”Spry 效果 概述 


Spry 效果 是 视觉 增强 功能 ,可 以 将 它们 应 用 于 使 用 JavaScript 的 HTML 页 面 上 的 几乎 
所 有 元 素 。 通 过 它们 可 以 使 网 页 元 素 显 示 或 隐藏 、 使 元 素 滚动 显示 、 增 大 或 收缩 ， 达 到 类 
似 动画 的 效果 。 在 “行为 ”面板 的 下 拉 菜 单 中 选择 “效果 ”命令 ， 在 弹出 的 菜单 中 可 看 到 
包含 的 Spry 效果 。 下 面 分 别 进行 介绍 。 

显示 / 渐 隐 : 使 元 素 显示 或 渐 隐 。 

高 亮 颜色 : 更 改元 素 的 背景 颜色 。 

遮 帘 : 模拟 百叶 窗 ， 向 上 或 向 下 滚动 百叶 窗 来 隐藏 或 显示 元 素 。 
滑动 : 上 下 移动 元 素 。 

增 大 /收缩 : 使 元 素 变 大 或 变 小 。 

晃动 : 模拟 从 左 向 右 晃动 元 素 。 

挤 压 : 使 元 素 从 页 面 的 左上 角 消 失 。 


12.5.2 ”为 页 面 添加 Spry 效果 
合理 应 用 Spry 效果 可 以 丰富 页 面 效 果 , 如 更 改元 素 的 不 透明 度 、 缩 放 比 例 和 背景 颜色 


人。 


“ 转 到 URL” 行 为 的 效果 与 “打开 浏览 器 窗口 ”类 似 ， 不同 的 是 “ 转 到 URL” 行 为 不 需要 对 窗 
口 进行 设置 ， 而 采用 系统 默认 的 属性 。 
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等 ， 以 达到 网 页 设计 者 预期 的 效果 。 
国王》 在 “Spry 效果 ”网 页 中 添加 行为 @。 


下 面 以 在 “Spry 效果 .html” 网 页 中 添加 “ 遮 帘 "、“ 滑 动 ” 和 “ 挤 压 ” 行 为 为 例 讲解 添 
加 Spry 效果 的 方法 。 


见 ”光盘 \ 素 材 \ 第 12 章 \Spry 效果 \Spry 效果 .html 
盘 ”光盘 \ 效 果 \ 第 12 章 \Spry 效果 \Spry 效果 .html > 


eh “Spry 效果 .html”， 可 看 到 页 面 中 包含 了 3 个 并 排 的 Div 标签 和 其 包含 
的 内 容 ， 效 果 如 图 12-38 所 示 。 

国 在 设计 祝 田 中 选择 第 1 个 Div 标签 ， 然 后 打开 “行为 ”面板 ， 单 击 “ 添 加 行为 ”按钮 
国 ， 在 弹出 的 下 拉 莱 单 中 选择 【效果 〗/【 让 帘 】 命 令 。 

俩 打开 “ 韦 帘 ”对 话 框 ， 在 “效果 持续 时 间 ” 文 本 框 中 输入 “1000"， 在 “效果 ”下 拉 
列表 框 中 选择 “向 上 遮 帘 ” 选项， 在 “向 上 造 帘 自 ”文本 框 中 输入 “100"”， 在 “向 
上 遗 帘 到 ”文本 框 中 输入 “30"， 单 击 EEBE 滞 按钮， 如 图 12-39 所 示 。 


日 标 元 天 | 上 前 过 定 门 容 》 站 | EJ 
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12-38 查看 网 页 原始 效果 12-39 设置 遮 帘 效果 属性 


国 此 时 , 将 返回 网 页 中 并 为 Div 标签 创建 菊 帘 效果 。 然 后 选择 第 2 个 Div 标签 ， 在 “ 行 
为 ”面板 的 下 拉 菜 单 中 选择 【效果 】〗/ 【晃动 命令 ， 打 开 “ 晃 动 ”对 话 框 ， 保 持 黑 
认 设 置 不 变 ， 单 击 臣 酉 本 按钮 ， 如 图 12-40 所 示 。 

俩 选择 第 2 个 Div 标签 中 的 图 片 ， 在 “行为 ”面板 的 下 拉 菜单 中 选择 【效果 了 /【 增 大 / 
收缩 〗 命令， 打开 “ 增 大 /收缩 ”对 话 框 ， 在 其 中 进行 如 图 12-41 所 示 的 设置 。 
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图 12-40 ”添加 晃动 效果 12-41 添加 增 大 /收缩 效果 


了 < 于 -有 we 国 …。 


当 设 置 为 向 下 让 帘 时 ， 将 产生 由 下 到 上 的 让 帘 效 果 ， 反 之 则 由 上 到 下 。 


中 文 版 Dreamweaver CS6 网 页 制作 从 入 门 到 精通 六 


俩 完成 后 选择 第 3 个 Div 标签 ， 在 “行为 ”面板 的 下 拉 莱 单 中 选择 【效果 〗/【 挤 压 】 
命令 ， 打 开 “ 挤 压 ”对 话 框 ， 保 持 默认 设置 不 变 ， 单 击 E 酉 本 按钮 为 其 应 用 效果 . 
国保 存 文档 , 在 浏览 器 中 预览 网 页 ， 当 单 击 不 同 的 文本 时 会 分 别 产 生 收缩 、 拌 动 等 效果 ， 

如 图 12-42 所 示 。 


横 叶 

和 ,又 才 苗 伦 、 水 区 共 等 ， 一 位 从 ,又 各 生 论 、 半 区 守 ， 
出 和 和 科 多 年 和 水 生 草 记 花 让。 志 ， 状 五 到 Kw 全 ye 1 局 HE 科 汉 年 未 和 苗 本 15 主 " 地 : 
;下 于 攻取 悍 ， 有 长 季 , 叶 卫 到 :3 i FRR i :3 


图 12-42 预览 Spry 效果 


12.6 ”提高 实例 一 一 制作 意见 调查 网 页 


4 用 机 村 P| 子 ， 一 入党。 向 芝 旺 一 和 可 训 过 3 六 鬼 大 
;六 古 科 ， 攻 13 二 站, 袍 央 大 于 长" 型- 年 生 区 和 向 日 区 属 植 物 。 共 总 ; 
By, 1 
所 ,下 而 闪 几 皮下 


了 秋季 5 为 再 过 3 米 ， 花 水 可 这 sn 划 米 。 苔 直 
;人 eg 立 , 村 | 


看 学 校 的 意见 调查 ， 其 效果 如 图 12-43 所 示 。 


本 例 将 制作 意见 调查 网 页 ， 通 过 在 网 页 中 添加 行为 、 表 单 和 表单 对 象 等 元 
素来 丰富 网 页 的 内 容 ， 使 其 包含 意见 调查 的 主要 内 容 。 通 过 该 页 面 可 以 查 


Welcome to 
> Dur Schoot 


上 意见 调查 


st 
由 CUSTONERCENTER Et 由 ms 由 St 可 直 at 同 至 5 革 


) 8665998 > 


天 和 一至 开 革 权 全 帮 弟 。 认识 二 届 守 5 一 


12-43 意见 调查 网 页 效果 
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Spry 效果 的 操作 十 分 简单 ， 只 需 选 择 命令 后 ， 按 照 提示 进行 操作 即 可 。 


总 es | 


See 2 


12.6.1 行业 分 析 


意见 调查 是 调查 问卷 的 一 种 形式 ， 调 查 问 卷 又 称 调查 表 或 询问 表 ， 是 以 问题 的 形式 记 
载 调查 内 容 的 一 种 方式 ， 它 的 表现 形式 多 种 多 样 ， 如 表格 、 卡 片 或 试卷 ， 但 在 如 今 网 络 发 
达 的 社会 ， 网 络 调查 问卷 也 成 为 了 一 种 十 分 流行 的 调查 方式 。 在 进行 调查 问卷 的 设计 时 ， 
必须 保证 问题 能 传达 给 参与 调查 的 人 员 ， 并 使 其 乐于 参与 回答 。 因 此 在 设计 网 络 调查 问卷 
时 应 注意 以 下 几 个 方面 : 

主题 明确 ， 从 实际 问题 出 发 ， 突 出 重点 ， 不 要 出 现 可 有 可 无 的 问题 。 

问题 应 通俗 易 懂 ， 使 应 答 者 一 目 了 然 ， 并 愿意 如 实 回答 。 

问题 应 按照 先 易 后 难 、 先 简 后 繁 、 先 具体 后 抽象 的 顺序 进行 排列 ， 使 其 符合 应 答 者 
的 思维 。 

问卷 的 语气 要 亲切 ， 符 合 应 答 者 的 理解 能 力 和 认识 能 力 ， 避 免 使 用 专业 术语 。 

对 问题 应 采取 公正 的 态度 ,使 问卷 具有 合理 性 和 可 答 性 ,避免 主观 性 和 暗示 性 ， 以 
免 答 案 失真 。 

控制 问卷 的 长 度 ， 一 般 不 宜 太 长 ， 否 则 应 答 者 容易 失去 耐心 。 


12.6.2 ”操作 思路 


为 更 快 完成 本 例 的 制作 ， 并 尽 可 能 运用 本 章 讲解 的 知识 ， 本 例 的 操作 思路 如 下 。 


12.6.3 ”操作 步骤 


下 面 介绍 制作 意见 调查 网 页 的 方法 。 其 操作 步骤 如 下 : 


光盘 \ 素 材 \ 第 12 章 \ 意 见 调查 \opinion.html 


见 光盘 \ 效 果 \ 第 12 章 \ 意 见 调查 \opinion.html 
人 蝎 人 本 ” 交 舟 实例 演示 \ 第 12 章 \ 制 作 意见 调查 网 页 


TD 
~ 
Fa 


调查 问卷 有 很 多 类 型 ， 可 以 根据 不 同 的 商业 用 途 进行 制作 ， 如 产品 调查 、 商 品 信息 反馈 和 意见 
收集 等 。 


. 

而 
og 
& 
村 


| 和 入 中 文 版 Dreamweaver CS6 网 页 制作 从 入 门 到 精通 六 多 


国 打 开 “ 意 见 调 查 ”文件 夹 中 的 “opinion.html” 网 页 ， 将 鼠标 光标 定位 在 <body> 标 签 
中 ， 选 择 【 窗 口 〗/【 行 为 〗 命 令 ， 打 开 “ 行 为 ”面板 。 

国 单 击 “ 行 为 "面板 中 的 “添加 行为 "按钮 国 , 在 弹出 的 下 拉 菜 单 中 选择 “调用 JavaScript” 
命令 。 

国 打 开 “调用 JavaScript” 对 话 框 ， 在 “JavaScript” 文本 框 中 输 JavaScript 的 代码 ， 
这 里 输入 “confirm(" 感 谢 您 参与 本 次 的 意见 调查 ， 希 望 您 能 认真 填写 ! ")”， 然 后 单 
击 臣 矿 按钮， 如 图 12-44 所 示 。 

辆 返回 “行为 ”面板 中 即 可 看 到 已 添加 的 行为 ， 如 图 12-45 所 示 。 


单 击 


2 
CE 
了 


天助 


图 12-44 “调用 JavaScript” 对 话 框 图 12-45 查看 添加 的 行为 

图 将 鼠标 光标 定位 在 页 面 中 间 的 空白 处 ， 选 择 【插入 〗/【 表 单 〗3/【 表 单 】 命 令 插 入 一 
个 表单 ， 然 后 再 插入 一 个 9 行 4 列 的 表格 ， 设 置 第 1 列 的 宽度 为 “20"， 第 2 列 的 宽 
度 为 “200”， 第 4 列 的 宽度 为 “100”。 

辆 设置 第 2 列 的 对 齐 方式 为 “ 右 对 齐 *， 第 3 列 的 对 齐 方式 为 “ 左 对 齐 ”。 在 第 2 列 中 
输入 调查 需要 的 问题 ， 其 效果 如 图 12-46 所 示 。 

俩 将 鼠标 光标 定位 在 第 3 列 第 3 行 中 ， 单 击 “ 表 单 ”插入 栏 中 的 “文本 字段 ”按钮 加 )， 
打开 “输入 标签 辅助 功能 属性 ”对 话 框 ， 在 “ID” 文 本 框 中 输入 名 称 为 “name”， 单 
击 匡 本 加 按 钮 ， 如 图 12-47 所 示 。 


过 入 标 生 姑 细 功 名 恒信 
汲 欢迎 您 米 到 我 们 的 网 
出 ED 
i 区 僻 月 行 和 本 记 环 作 
| ee | F525 
| se | 
1 Ee { 各 加 万 有 
| : A | 在 委 单 项 后 
| | i 间 性 “To 刍 引 
划 果 在 委 入 对 象 灶 不 楚 输 入 此 全 总 . 适 更 可 - 覆 
ET 了 视 
图 12-46 设置 表格 格式 并 添加 文本 12-47 设置 文本 字段 对 象 的 属性 


俩 将 鼠标 光标 定位 在 第 3 列 第 4 行 ， 单 击 “表单 ”插入 栏 中 的 “ 单 选 按钮 ”按钮 回 ， 在 
打开 的 对 话 框 中 设置 其 ID 值 为 “girl”， 标 签 为 “ 女 ”， 选 中 加 有 村 标记 环 作 和 1 回 在 表 # 贰 后 单 先 


天 


在 加 载 页 面 时 ， 一 般 设置 其 事件 为 “onLoad”。 


-0 


按钮 ， 并 单 击 匡 醋 梧 按钮， 如 图 12-48 所 示 。 

俩 使 用 相同 的 方法 ， 在 之 后 插入 一 个 ID 为 “man”， 标 签 为 “ 男 ” 的 单 选 按钮 ， 然 后 选 
中 该 单 选 按钮 ， 在 其 “属性 ”面板 中 选中 “ 初 识 状态 ” 栏 中 的 语 E5 可 单 选 按钮 ， 如 
图 12-49 所 示 。 


| [| 到 捐 四 ， 司 - 包 丰 只 司 区 C 本 都 


是 i 
ee ee ’ 
i ~、 个 装 节 535 x 100 Et 
如果 在 入 力 时 下 因 条 信玄， 过 下 轴 回 PL Re 3 DE) 
Fe free 本 来 和 中 
图 12-48 ”添加 单 选 按钮 图 12-49 设置 单 选 按钮 的 属性 


国 将 民 标 光标 定位 在 第 3 列 第 5 行 ， 单 击 “ 表 单 ” 插 入 栏 中 的 “ 单 选 按钮 组 ”按钮 图 ， 
单 击 臣 可 本 按钮 ， 打 开 “ 单 选 按钮 组 ”对 话 框 。 

国 在 “名 称 ” 文 本 框 中 输入 “course”， 在 “ 单 选 按钮 ”列表 框 中 分 别 输入 “语文 ”"、“ 数 
学 ”"、“ 英 语 ”、“ 音 乐 "、 “美术” 和 “社会 "， 单 击 匡 醋 刁 按钮， 如 图 12-50 所 示 。 
国 将 刀 标 光标 定位 在 第 3 列 第 6 行 ， 单 击 “ 表 单 ” 插 入 栏 中 的 “ 复 选 框 组 ”按钮 回 ， 在 
打开 的 对 话 框 中 添加 标签 为 “网 球 ”"、“ 足 球 ”、“ 动 漫 社 ” 和 “音乐 社 ”的 复 选 框 ， 如 

图 12-51 所 示 。 


名 称 active 
复兴 生硬 | 三 ] 


布 帅 ,使 用 : 回 | 换行 特 ( <br> 标 答 9 有 局 . 使 用 : 回 换行 符 ( <br> 秆 答 ) 
日 表格 日 到 格 


图 12-50 ”添加 单 选 按钮 组 图 12-51 添加 复 选 框 组 
例 在 第 3 列 第 7 行 中 插入 一 个 文本 字段 ， 然 后 将 鼠标 光标 定位 在 第 3 列 第 8 行 ， 单 击 
“文本 区 域 ” 按 钮 导 ， 插 入 一 个 ID 为 “mend” 的 文本 区 域 。 
国 洗 最 后 一 列 拆 分 为 两 个 单元 格 ， 单 击 “ 表 单 ”插入 栏 中 的 “图 像 域 ”按钮 图 ， 在 打开 
的 对 话 框 中 选择 插入 的 图 片 为 “poinion_tj.jpg”， 如 图 12-52 所 示 。 
例 使 用 相同 的 方法 ， 在 拆 分 后 的 一 个 单元 格 中 插入 “图 像 域 ”按钮 国 ， 并 设置 其 图 像 源 


用 户 可 根据 需要 ， 设 置 单 选 按钮 和 复 选 框 的 初始 选中 状态 。 
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文件 为 “opinion_cz.jpg”， 效 果 如 图 12-53 所 示 。 
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12-52 ”选择 图 像 源 文件 图 12-53 ”查看 效果 


6 园 选中 括 入 的 3 按钮， 选择 【窗口 〗 /【 行 为 了】 命令， 打开 “行为 ”面板 ， 单 击 其 
中 的 “添加 行为 ”按钮 国 ， 在 弹出 的 下 拉 菜 单 中 选择 “ 转 到 URL” 命 令 。 

国 打 开 “ 转 到 URL” 对 话 框 ， 单 击 “URL” 文 本 框 后 的 [Ba 按钮 ， 打开“ 选择 文件 " 
对 话 框 ， 在 其 中 选择 需要 打开 的 页 面 为 “referhtml”， 如 图 12-54 所 示 。 

国 半 二 Ga 二 校 钮 返回“ 转 到 URL” 对 话 框 ， 在 “URL” 文 本 框 中 即 可 查看 网 页 的 地 
址 ， 然 后 单 击 EE 枉 本 按钮 完成 设置 ， 如 图 12-55 所 示 。 


[7 rr 有 EE [= 

选择 文件 独自” 吉文 件 尔 蚁 [aaa 

ER ET 
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pm ee EE 

相 H 于 [区 区 om hm 

在 站 点 定义 中 更 故 轩 让 的 链 管 扯 计 二 

图 12-54 选择 文件 图 12-55 返回 “ 转 到 URL” 对 话 框 
国 业 “行为 ”面板 ， 在 其 下 拉 菜 单 中 选择 “检查 表单 ”命令 ， 打 开 “ 检 查 表单 ”对 
话 框 。 


国 在 “检查 表单 ”对 话 框 的 “ 域 ” 列 表 框 中 选择 “textarea “mend' ”选项 ， 选 中 回访 咬 
复 选 框 ， 然 后 单 击 世 本 本 按钮 ， 如 图 12-56 所 示 。 

国 完 成 后 保存 网 页 ， 并 按 “F12” 键 对 网 页 进行 预览 ， 填 写 的 内 容 将 自动 对 表单 进行 验 
证 。 完 成 表单 的 填写 后 单 击 记 于 天 按钮 时 ， 将 自动 跳 转 到 “refer.html” 页 面 ， 如 
图 12-57 所 示 。 
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244 
添加 “ 转 到 URL” 行 为 ， 其 效果 与 添加 超级 链接 较为 类 似 。 
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12-56 检查 表单 
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图 12-57 预览 效果 


12.7 ”提高 练习 一 一 制作 留言 板 页 面 


终 效果 如 图 12-58 所 示 。 


下 面 通过 制作 留言 板 页 面 进一步 巩固 层 苔 样式 表 的 应 用 知识 。 该 练习 主要 
通过 新 建 CSS 样式 来 对 网 页 的 文本 格式 、 图 像 格式 和 背景 进行 设置 ， 其 最 


清 簿 入 联系 人 的 姓名 


壬 答 入 公司 名 入 


图 12-58 留言 板 网 页 效果 


光盘 \ 素 材 \ 第 12 章 \ 留 言 板 \message.html 
有 刚 ”光盘 \ 效 果 \ 第 12 章 \ 留 言 板 message.html 
N 荐 久 6 瘟 ” 光 盘 \ 实 例 演示 \ 第 12 章 \ 制 作 留 言 板 页 面 


该 练习 的 操作 思路 与 关键 提示 如 下 。 


制作 企业 网 站 的 留言 板 ， 其 基本 要 求 是 主题 清晰 


、 内 容 明确 且 需 保留 留言 者 的 基本 信息 。 
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ID 
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思路 : 


| 关键 提示 : 


新 建 的 CSS 样式 : 
新 建 ID 为 “title” 的 CSS 样式 ,设置 其 文字 大 小 为 “14px”, 宽度 为 “bold”, 颜色 为 “#FFFF00”。 
新 建 class 为 “loop” 的 CSS 样式 ， 设 置 其 字体 大 小 为 “13px”， 颜 色 为 “#FF6”， 文 本 对 齐 
方式 为 “right”。 


表单 对 象 的 添加 : 
电话 、 邮 箱 、 留 言 等 内 容 的 表单 添加 Spry 验证 文本 域 ， 并 设置 其 格式 为 必需 的 。 


12.8 知识 问答 


在 应 用 表单 和 行为 的 过 程 中 ， 难 免 会 遇 到 一 些 难题 ， 如 表单 添加 的 位 置 、 
如 何 让 对 象 实现 更 复杂 的 效果 等 。 下 面 将 对 应 用 表单 和 行为 的 过 程 中 常见 
的 问题 给 出 相应 的 解决 方案 。 


问 : 表单 对 象 必须 添加 在 表单 域 中 吗 ? 

答 : 如 果 需 要 通过 表单 将 该 表单 对 象 包含 的 信息 提交 给 动态 处 理 页 ， 则 必须 将 表单 对 
象 添 加 在 表单 域 中 ; 如 果 只 是 用 于 显示 一 些 文本 ， 不 需要 提交 给 动态 处 理 页 ， 则 可 以 不 用 
添加 在 表单 域 中 。 当 鼠标 光标 定位 在 没有 表单 域 的 位 置 上 进行 表单 对 象 的 添加 时 ， 将 打开 
一 个 提示 对 话 框 ， 单 击 [要 We 按钮 即 可 不 添加 表单 域 ， 即 表单 对 象 不 在 表单 域 中 。 


问 : Dreamweaver CS6 预 置 的 “检查 表单 ”行为 中 的 提示 是 英文 的 ， 有 没有 办 法 将 其 
修改 为 中 文 呢 ? 

答 : 有 。 可 打开 添加 了 “检查 表单 ”行为 的 网 页 文档 ， 切 换 到 代码 视图 中 找到 
“MM _validateForm” 函 数 ， 在 其 中 修改 英文 提示 为 中 文 即 可 ， 如 图 12-59 所 示 为 原本 的 英 
文 提示 ， 如 图 12-60 所 示 为 修改 为 中 文 后 的 效果 。 
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添加 表单 和 行为 后 ，Dreamweaver CS6 会 自动 在 网 页 中 添加 代码 ， 这 些 代码 都 是 与 其 对 象 一 一 


对 应 的 ， 在 对 HTML 代码 不 熟悉 的 情况 下 ， 不 要 随意 进行 修改 。 


no | 


证 (docunent. getElenentByI){ 
Var i,p, q rm test,num, nin, max, errors="’, args=MO_validateForm. 
rements, 
for (i=0; i<(args.length-2); i4=3) { test=args[i+2] ;val= 
document. getElenentById(args[i]); 
证 《val) { rm=val.nane; if ((val=val. value)!: 
证 (test. indesOf ("isEnail’ )!= 1) 【 p=ya] 
if (pl i =(val. length-1)) errorsit= 


,Nn 

} else if (test!="R') {nun = parseFloat (val); 
《isNaN(val)) errorst=" 一 “Hrmt 必须 包含 一 个 数字 ; 
证 (test, indexOf ("inRange’) != -1) 【 p=testindexoff 3 


airetest, sabstring (8,p) ; nar=test. substrine (ptl) 
pe 用 过 《nuenin || naxCnun) errorst="- “trmt” 数 值 必 须 介 于 | 
FF else af (test,charAt (0) = °K) errors = -ta a ee 


quired. nr 上 } 位 Bl } else if (test. charht (0) == °KR’) errors 4= "~ ° Hrmt” 
Te eC tae olor ea scarred ee 
dopument,IOLreturnyalue = (errors = °°) 了 document.JDLreturnyalue = (errors = ""); 
12-59 ”英文 提示 图 12-60 ”中 文 提示 


问 : Dreamweaver CS6 中 预 置 的 行为 只 能 让 对 象 实现 简单 的 效果 ， 有 什么 方法 能 让 对 
象 实现 更 复杂 的 效果 吗 ? 

答 : 有 。 单 击 苞 枉 按钮 可 打开 代码 页 面 ， 在 其 中 添加 合适 的 VBScript、JavaScript 等 脚 
本 语言 即 可 让 对 象 实现 更 复杂 的 效果 。 


0 ee Spry 框架 4==5==== | 


Spry 效果 是 视觉 增强 功能 , 通常 用 于 在 一 段 时 间 内 高 亮 显示 信息 , 创建 动画 过 
! 渡 或 者 以 可 视 方式 修改 页 面 元 素 。 可 以 将 效果 直接 应 用 于 HTML 元 素 , 而 无 须 其 他 
! 自 定义 标签 。 在 Dreamweaver CS6 的 工作 界面 中 选择 “Spry” 插 入 栏 ， 其 右 侧 包含 
! 了 5 个 较为 常用 的 Spry 对 象 : 画 可 是 回回 ， 分 别 是 Spry 菜单 栏 、Spry 选项 卡 式 面板 、 


! Spry 折 苍 式 面 板 、Spry 可 折 苔 面板 和 Spry 工具 提示 。 单 击 对 应 的 对 象 即 可 创建 Spry 
1 框架 ， 如 图 12-61 所 示 为 创建 的 Spry 菜单 栏 。 


Eb BET == . wn 
中 心 概要 
会 民 动 志 


成 功率 例 


一 
图 12-61 Spry 菜单 栏 p> | 


7 -用 wd 国 … 


使 用 Spry 框架 可 以 制作 出 动态 显示 的 导航 菜单 ， 其 应 用 范围 十 分 广泛 。 
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在 Dreamweaver CS6 进 行 网 页 设计 的 过 程 中 ， 需 要 时 刻 总 结 制 作 的 技巧 和 
经 验 ， 以 提升 自己 网 页 制作 的 能 力 。 而 Dreamweaver 除了 能 够 进行 静态 网 页 
的 制作 外 ， 还 支持 几乎 所 有 的 动态 网 页 的 开发 。 为 了 使 用 户 能 够 对 网 页 制作 掌 
握 得 更 加 熟练 ， 本 篇 中 将 对 网 页 制作 的 技巧 、 制 作 动态 网 页 的 方法 、 为 网 页 添 
加 特效 和 移动 设置 网 页 的 制作 及 应 用 等 知识 进行 讲解 。 

在 学 习 这 些 知 识 的 过 程 中 ， 用 户 需 要 结合 自身 的 需要 ， 举 一 反 三 ， 达 到 精 
通 使 用 Dreamweaver CS6 的 目的 。 
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网 页 制作 技巧 及 辅助 软件 


! 查看 网 页 源 代码 
1 禁止 保存 网 页 

1 定时 跳 转 页 面 

T 


Photoshop 图 像 处 理 软件 
玩 转 颜 色 配 色 软 件 


网 页 的 制作 除了 需要 基本 的 设计 外 ， 很 多 时 候 还 需要 
添加 一 些 特殊 的 元 素 和 做 一 些 特殊 的 处 理 ， 所 以 在 进行 网 
“页 制作 的 同时 ， 还 需要 通过 一 些 技巧 或 软件 进行 各 种 修饰 ， 
轻松 地 为 网 页 添加 或 设置 一 些 非常 实用 的 元 素 ， 如 自动 跳 
转 页 面 、 添 加 网 页 收藏 链接 等 。 在 进行 网 页 制作 和 网 站 设 
计 的 过 程 中 ,， Dreamweaver 并 不 是 万 能 的 , 有些 功能 和 效果 
还 需要 一 些 辅助 软件 来 支持 。 下 面 将 分 别 介绍 网 页 设计 的 
技巧 及 相关 辅助 软件 的 使 
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13.1 网 页 制作 技巧 


在 网 页 制作 过 程 中 可 能 会 遇 到 一 些小 问题 ， 使 用 一 些小 技巧 即 可 解决 或 避 
免 这 些 问 题 ， 而 且 还 可 以 实现 一 些 非 常 好 的 效果 。 


13.1.1 消除 网 页 中 的 乱码 


有 时 在 预览 制作 的 网 页 时 ， 会 发 现 网 页 中 的 文本 内 容 显 示 为 乱码 ， 产 生 这 种 现象 的 原 
因 是 在 网 页 中 没有 指明 网 页 所 使 用 的 编码 所 造成 的 。 通 常 中 文 网 页 都 使 用 “GB2312" 编码 ， 
只 需 在 网 页 的 <head></head> 标 签 中 输入 代码 “<meta http-equiv="Content-Type"” content= 
"text/html; charset=gb2312" />” 即 可 。 


13.1.2 ”制作 “1” 像 素 的 表格 边框 


当 设置 表格 边框 粗细 为 “1” 时 ， 显 示 出 的 效果 却 很 粗 ， 没 有 达到 1 像素 边框 的 效果 ， 
et re the ey 首先 ， 创 建 一 个 表格 ， 并 设置 边框 
粗细 为 “0”"， 间 距 为 “1”"， 表 格 背 景 颜色 为 边框 线 的 颜色 ， 如 这 里 设置 为 “#0099FF"， 此 
时 表格 的 效果 如 图 13-1 所 示 , 然后 选中 表格 中 的 所 有 单元 格 , 设置 背景 颜色 为 另 一 种 颜色 ， 
如 和 白色， 预览 其 效果 如 图 13-2 所 示 ,“1“ 像 素 的 表格 边框 即 制作 完成 了 。 


13-1 设置 表格 属性 图 13-2 设置 单元 格 属性 


13.1.3 ”去 掉 单 击 超级 链接 后 的 图 像 虚线 


单 击 图 像 超 级 链接 后 ， 通 常会 在 图 像 周围 出 现 虚 线 ， 显 得 不 美观 ， 这 时 ， 可 添加 
“onFocus="this.blur()"” 代 码 来 解决 此 问题 。 完 成 的 图 像 链接 代码 如 下 所 示 : 


<a href="index.html" onFocus="this.blur()"><img src="logo.jpg" border=0></a>。 


13.1.4 制作 “ 设 为 主页 ”超级 链接 


“ 设 为 主页 ”链接 就 是 单 击 该 链接 后 ， 会 打开 一 个 提示 对 话 框 ， 提 示 是 否 将 指定 的 网 
址 设置 为 首页 ， 选 择 更 改选 项 后 单 击 蕊 是 D- 按钮 ， 即 可 将 指定 的 网 址 设置 为 浏览 器 的 主 
页 ， 每 次 打开 浏览 器 ， 将 自动 打开 指定 的 网 站 。 


0 -用 wd 国 … 


在 Dreamweaver CS6 中 新 建 网 页 时 ,通常 都 会 自动 添加 “<meta http-equiv="Content-Type" content 
="text/html; charset=gb2312" />” 代 码 。 


mrss | | 
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有 ES 国 > 制作 设 为 主页 的 超级 链接 @e 
下 面 制作 一 个 “ 设 为 主页 ”超级 链接 ， 单 击 后 将 浏览 器 的 首页 设置 为 “http://www. 


Verycool.com 。 


从 光盘 \ 效 果 \ 第 13 章 \zhuye.html > 


俩 新 建 一 个 网 页 文档 ， 输 入 文本 “ 设 为 主页 ”， 选 中 文本 ， 在 “属性 ”面板 的 “链接 ” 
下 拉 列 表 框 中 输入 “#"” 符号 ， 按 “Enter” 键 创建 空 链接 。 

辆 钨 换 到 代码 视图 ， 在 “"#"” 代 码 后 添加 “onclick="this.style. behavior='url(#default 
#homepage)';this.setHomePage('http://www. verycool.com/");" 代 码 ， 如 图 13-3 所 示 。 


<hody> 
<a href="#"onclick="this.style.behavior='url (l#default#homepage})'; 


this.setHomePage{'http://wuy.verycool.com/'); "> 设 为 主 
</a> 


图 13-3 添加 代码 
俩 保存 并 预览 网 页 ， 单 击 “ 设 为 主页 ”超级 链接 ， 将 打开 “添加 或 更 改 主页 ”对 话 框 ， 
如 图 13-4 所 示 。 


个 您 想 使 用 以 下 项 作为 主页 吗 ? 
I htp: /wre veryeool. con/ 


将 此 网 页 用 作 唯一 主页 0 
将 此 网 页 添加 到 主页 选项 卡 ) 


13-4 提示 对 话 框 


13.1.5 ”制作 “添加 到 收藏 来” 链接 


单 击 “添加 到 收藏 夹 ”超级 链接 后 ， 将 打开 “添加 收藏 ”对 话 框 ， 单 击 世 Ba 按钮 
即 可 将 其 添加 到 浏览 器 的 收藏 夹 中 。 单 击 浏览 器 中 的 襄 wa* 按钮 即 可 快速 打开 相应 的 网 
页 ， 如 图 13-5 所 示 。 


次 天 sboutblenk 下 建议 网 站 | 


了 0 
80 四 六 。 半 要 让 区 夫 ， 请 访 I9tk 纺 忠心 。 


名称 即 : 依 六 有 限 专任 公司 
还 加 型 了 3 


Cj Cm 


252 
在 “onclick="this.style.behavior="url(#default#homepage)';this.setHomePage('http://www.eaglegeng. 


com/");"”” 代 码 中 ， 将 “http://www.eaglegeng.com/” 换 为 自己 的 网 址 即 可 .。 
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制作 “添加 到 收藏 夹 ”链接 的 方法 是 : 在 网 页 中 添加 提示 文本 并 选中 文本 ， 再 在 “ 属 
性 ”面板 的 “链接 ”下 拉 列 表 框 中 输入 “JavaScript:addFav();”"， 切 换 到 代码 视图 ， 在 
<head></head> 标 签 之 间 添 加 如 下 代码 , 保存 网 页 即 可 ,其 中 括号 内 的 网 址 和 名 称 是 收藏 网 
站 的 网 址 和 站 点 名 称 ， 可 任意 修改 。 

<SCRIPT language=JavaScript> 

> 

function addFav(){ 
window.external.AddFavorite('http:/www.eagle.com',' 依 格 有 限 责任 公司 '); 


} 


function MM_openBrWindow(theURL,winName,features) { //v2.0 
window.open(theURL,winName,features); 

//--> 

</SCRIPT> 


13.1.6 ”查看 网 页 源 代码 


在 浏览 网 页 时 ， 若 发 现 制作 比较 好 的 特效 ， 可 以 通过 查看 网 页 的 源 代码 来 查看 其 实现 
的 代码 。 在 浏览 器 窗口 中 选择 【 页 面 ] /【 查看 源 文件 】 命 令 ， 即 可 在 打开 的 记事 本 窗口 中 
显示 该 网 页 的 源 代 码 。 此 时 ， 选 择 记事 本 中 的 【文件 】/【 保存 】 命 令 还 可 以 将 该 网 页 进行 
保存 ， 然 后 用 Dreamweaver 打开 即 可 查看 源 代 码 。 


13.1.7 ”禁止 保存 网 页 


在 浏览 网 页 时 ， 可 以 选择 浏览 器 窗口 中 的 【 页 面 ] /【 另存 为 】 命 令 保存 网 页 ， 为 了 防 
止 用 户 保 存 网 页 ,可 以 在 网 页 的 <head></head> 标 签 之 间 中 添加 一 段 代码 " <noscript><iframe 
src=*.html></iframe></noscript>” 来 禁止 保存 网 页 。 

当 用 户 在 对 网 页 执行 保存 操作 时 ， 将 打开 一 个 提示 对 话 框 ， 提 示 无 法 保存 该 网 页 ， 如 
图 13-6 所 示 。 


在 添加 到 收藏 天 代码 中 ,“ 依 格 有 限 责 任 公司 ”是 显示 在 “收藏 ”菜单 中 的 名 称 , “http:Wwww. 
eagle.com” 是 单 击 “ 收 藏 ” 菜 单 中 的 名 称 后 打开 的 网 页 ， 可 根据 实际 需要 进行 修改 。 
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| 和 中 文 版 Dreamweaver CS6 网 页 制作 从 入 门 到 精通 GY 4 


13.1.8 更换 IE 地 址 栏 前 的 图 标 


在 IE 浏览 器 地 址 前 都 有 一 个 和 略图 标 ， 但 有 些 网 站 的 图 标 却 并 不 一 样 ， 如 图 13-7 所 示 
为 百度 网 站 的 独特 图 标 ， 这 是 通过 添加 代码 来 实现 的 。 


"|B|t|xNP ang 


实 履 二 天 | 准 回 建 议 网 站 居 网 页 快 入 库 了 
图 百度 一下, 你 M30 道 人 生 - 国 -与 填 ， 页 FP) 安全 (5)> 工具 (0) 恩 - 


13-7 不 一 样 的 站 点 图 标 
在 添加 代码 前 ， 需 要 先 制 作 一 个 ico 图 标 文件 放 在 站 点 文件 夹 中 ， 然 后 在 网 页 中 添加 
“<link rel="Shortcut Icon" href="favicon.ico">” 代 码 。 其 中 “favicon.ico” 是 ico 图 标 文件 
的 位 置 及 名 称 ， 根 据 实际 情况 进行 更 换 即 可 。 


13.1.9 ”定时 跳 转 


在 登录 账户 或 在 论坛 中 发 表 言 论 后 ， 常 看 到 “过 3 秒 自动 返回 首页 ”的 效果 。 要 实现 
这 种 效果 其 实 很 简单 ， 只 需 在 <head></head> 标 签 之 间 添 加 “<meta http-equiv="refresh" 
content="3; URL=index.html" />” 代 码 即 可 。 当 然 ， 前 提 是 该 网 页 与 首页 文件 “index.html” 
在 同一 文件 夹 下 ， 否 则 需要 输入 正确 的 URL 路 径 。 


13.1.10 ”让 表单 和 其 他 内 容 之 间 无 空隙 


当 创 建 一 个 表单 后 , 表单 与 表单 外 的 内 容 总 会 有 一 个 较 大 的 空隙 ， 显得 不 美观 、 紧 凑 ， 
可 使 用 一 个 小 技巧 避免 这 种 情况 的 发 生 。 

使 用 常规 方法 创建 完 表 单 后 ,切换 到 代码 视图 ， 将 表单 标签 “<form id="forml" name= 
"form1" method="post" action=""> ”移动 到 <table> 标 签 后 ， 再 将 </form> 标 签 移 到 </table> 标 
签 之 前 ， 如 图 13-8 所 示 。 保存 后 文字 与 表单 之 间 的 空隙 便 会 消失 ， 如 需 空 阶 还 可 按 自己 的 
需要 进行 换行 等 操作 来 添加 。 

二 家 站 的 内 窜 :5 0 bonds connpnatines 0 cerlapiniie"l 


ne="fornl” n “post” ac A 
width="300” border="0” cellpaddine="0” i lbgcolor="#cccccc: 
#CCOCCC” “fornl” "fornl” “post” act 


td bgcolor="#FFFFFF" Rnbsp:; /td 


AFFFFFF" nbsp: /t+ 
color="#FFFFFF" nbsp: /td 


由 
FFFFFF")&nbsp : /td 


td bgcolor="#FFFFFF" nbsp:; </td td bgcolor="aFFFFFF" énbsp: ¢/td 
/td 


td bgcolor="#FFFFFF" nbsp: /td td bacolor="#FFFFFF" énbsp: /t+ 


这 里 说 的 源 代码 是 经 过 服务 器 解析 后 返回 给 浏览 器 的 代码 ， 不 能 等 同 于 用 ASP、PHP 和 JSP 语 
言 编写 的 完整 代码 ， 这 些 代码 是 看 不 到 的 。 
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13.2 ”制作 网 页 的 辅助 软件 


尽管 网 页 页 面 的 制作 使 用 Dreamweaver 就 可 以 完成 , 但 是 为 了 使 网 页 更 加 
美观 、 更 加 专业 ， 通 常 在 制作 的 过 程 中 还 需要 借助 一 些 辅 助 设计 软件 ， 来 
增加 网 页 效果 或 实现 某 些 功能 。 


13.2.1 使 用 Photoshop 处 理 图 像 


在 制作 网 页 的 过 程 中 ， 往 往 需要 插入 各 种 形式 的 图 片 ， 由 于 网 页 内 容 需 要 在 最 短 的 时 
间 内 显示 在 浏览 器 中 ， 所 以 ， 对 于 图 像 的 要 求 比较 高 ， 网 页 图 像 需 要 达到 一 定 的 清晰 度 ， 
否则 就 失去 了 图 像 的 作用 ， 但 是 为 了 能 快速 显示 网 页 及 图 像 ， 图 像 文件 又 不 能 太 大 ， 否 则 
会 影响 下 载 速度 。 鉴 于 这 一 系列 的 要 求 ， 必 须 在 插入 图 像 前 对 其 进行 适当 的 处 理 ， 另 外 为 
了 制作 一 些 特殊 效果 的 图 像 、 按 钮 等 元 素 ， 也 需要 进行 专门 的 图 像 处 理 。 

Photoshop 是 Adobe 公司 开发 的 一 款 图 形 图 像 处 理工 具 ， 其 在 图 像 处 理 方面 具有 强大 
的 功能 ， 可 以 对 图 像 进行 效果 处 理 或 制作 一 些 Logo、 按 钮 和 导航 条 等 ， 如 图 13-9 所 示 为 
Photoshop CS6 的 工作 界面 。 在 其 工作 界面 中 选择 【文件 】/【 打 开 】 命令， 选择 需要 处 理 
的 图 像 打 开 , 便 可 以 通过 窗口 左 侧 的 各 种 工具 按钮 和 上 方 的 菜单 命令 对 图 像 进 行 各 种 操作 。 


13-9 Photoshop CS6 工作 界面 


13.2.2 ”使 用 玩 转 颜 色 配色 软件 


使 用 配色 软件 可 以 辅助 网 页 设计 者 进行 网 页 色彩 的 配置 ， 配 色 软 件 比较 多 ， 玩 转 颜色 
就 是 一 款 小 巧 实用 的 配色 软件 。 
玩 转 颜色 是 一 款 免 费 的 软件 ， 使 用 它 可 以 获取 屏幕 上 的 任何 颜色 ， 以 RGB、 网 页 色 、 


0 ,用 wd 国 … 


使 用 Photoshop 进行 优化 处 理 时 ， 如 果 没 有 改变 图 像 的 格式 ， 则 优化 后 的 图 像 会 覆盖 原始 图 像 。 


瑟 训 区 呈 下 二 志向 
DD 
a 
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十 六 进 制 和 Delphi 颜色 等 输出 。 更 可 以 输入 颜色 代码 调配 颜色 ， 同 时 还 自 带 颜 色 收 藏 夹 ， 
可 以 将 调配 的 颜色 保存 起 来 。 另 外 ， 该 软件 最 大 的 优点 是 可 以 获取 网 页 中 的 配色 方案 ， 并 
将 其 保存 起 来 。 该 软件 适用 于 编程 、 网 页 制作 时 进行 色彩 分 析 、 设 计 ， 如 图 13-10 所 示 为 
玩 转 颜色 软件 的 工作 界面 和 颜色 拾取 窗口 。 


me? 99 
医 6@ 多 图 


主 界面 ”收藏 只 ”设置 隐藏 


R6B 值 :[123.148.170 
网 页 色 : | #8134AA 
16 进 制 : | 0xAA9481 


名 开始 | 图 歼 值 1 村 
加 入 收藏 Delpht [$00AA3481 
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EE 
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13-10 玩 转 颜 色 主 界面 及 颜色 拾取 窗口 
启动 软件 后 ， 可 通过 选择 其 渐变 色 中 的 颜色 或 调整 R、G、B 3 个 颜色 滑 块 来 设置 需要 
的 颜色 ， 也 可 在 其 主 界面 中 单 击 区 到 | 按钮 ， 在 妆 和 让 到 涉 汪 定 克 径 访 外 的 到 包 选择 的 
颜色 代码 将 在 主 界面 中 显示 。 


13.2.3 ”使 用 文本 动画 制作 软件 FlaX 


FlaX 是 一 款 动画 制作 软件 , 相 
对 于 专业 的 Adobe Flash 动画 制作 
软件 来 说 ， 它 具有 操作 简单 、 体 积 
小 巧 等 特点 ， 可 以 满足 一 般 用 户 的 
文本 动画 制作 需求 。 

FlaX 可 以 输出 .swf 格式 的 动 
画 ， 其 内 置 了 许多 效果 ， 直 接 选择 


守 体 加 :jw 


即 可 获得 很 好 的 动画 效果 ， 其 软件 ee 


号 相反 IAAY| 。 加 55 
图 13-11 FlaX 软件 界面 


界面 如 图 13-11 所 示 。 


国 汕 E>》> 使 用 Flax 制作 动画 © 


[De 光盘 \ 效 果 \ 第 13 章 \myfile.swf > 


国 双 击 Flax 软件 的 文件 夹 中 的 “FlaX.exe” 文 件 ， 启 动 FlaX。 
国 在 “动画 属性 ”面板 中 进行 动画 属性 的 设置 。 在 “宽度 ”和 “高 度 ”数值 框 中 分 别 输 


四 国 


在 玩 转 颜 色 软 件 主 界面 中 ， 单 击 [于 8 按钮 ， 即 可 在 电脑 屏幕 的 任意 位 置 拾取 颜色 ， 另 外 还 可 
自己 通过 调整 R、G、B 参数 来 获取 自 定义 颜色 。 


-0 


蚂 mek || 


a et 

入 影片 的 宽度 和 高 度 ， 在 “ 帧 频 ” 数 值 框 中 输入 影片 的 播放 频率 ， 在 则 图 标 后 的 文本 
框 中 输入 影片 的 背景 颜色 ， 在 “方向 ” 栏 中 单 击 太 按钮 设置 影片 的 方向 ， 如 图 13-12 
所 示 。 

国 设 置 文本 及 文本 的 属性 . 在 “文本 属性 ”面板 的 “文本 ”文本 框 中 输入 要 显示 的 文本 ， 
在 “X”、“Y” 数 值 框 中 输入 文本 的 坐标 值 ， 在 “字体 ”下 拉 列 表 框 中 选择 字体 ， 在 
字体 大 小 下 拉 列 表 框 中 设置 字体 的 大 小 ， 另外， 可 以 单 击 “ 风 格 ” 栏 中 的 相应 按钮 设 
置 文本 的 样式 风格 ， 如 图 13-13 所 示 。 


全 标 玉 6 二 5 二 :0 


字体 四 ); 栖 体 了 8 可 
语系 G); [cazslz xz] Z| Crrrce 

as: AJRAIAIA FE 设置 
13-12 设置 动画 属性 13-13 设置 文本 属性 


俩 设置 动画 效果 . 在 “参数 设置 ”面板 的 下 拉 列 表 框 中 选择 一 种 特效 ， 然 后 进行 其 他 具 
体 属 性 设置 ， 如 图 13-14 所 示 ， 完 成 设置 后 的 效果 如 图 13-15 所 示 。 


图 13-14 设置 动画 效果 图 13-15 预览 设置 效果 


人 辆 丢 择 【文件 】/【 导 出 为 SWF 文件 〗 命 令 ， 打开“ 另存 为 ”对 话 框 ， 在 该 对 话 框 中 设 
置 文件 保存 位 置 和 文件 名 称 后 ， 单 击 L 鲜 @@ | 按钮 完成 动画 的 制作 ， 如 图 13-16 所 示 。 
保存 后 便 可 使 用 播放 器 打开 并 播放 动画 ， 如 图 13-17 所 示 。 


Re | 
保 在 tm |[ 国 区 玉林 -|]+ 旬 宁国 ~ 
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Adobe 
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@ Adobe Flash player 10 [SE 
文件 (月 ” 重 看 (V) 控制 (C) “帮助 


克 逢 fo。 厂 全 虹 苇 和 厂 国家 及 疡 多 


天 法 正确 时 到 sh 中 的 字符 


图 13-16 “另存 为 ”对 话 框 图 13-17 播放 制作 的 动画 


在 “参数 设置 ”面板 中 ， 选 择 不 同 的 特效 有 不 同 的 设置 子 类 特效 ， 且 有 不 同 的 设置 参数 ， 通 过 
设置 这 些 属性 ， 可 以 达到 需要 的 动画 效果 。 
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| 和 中 文 版 Dreamweaver CS6 网 页 制作 从 入 门 到 精通 Gy 多 


13.2.4 使 用 LeapFTP 发 布 站 点 


尽管 Dreamweaver 也 有 站 点 发 布 管理 的 功能 , 但 由 于 Dreamweaver 主要 的 功能 是 网 页 
设计 ， 运 行 软件 会 耗费 一 定 的 系统 资源 ， 如 果 只 是 临时 上 传 或 管理 站 点 文件 ， 专 门 启动 
Dreamweaver 会 比较 麻烦 ， 这 时 可 使 用 专门 的 FTP 软件 上 传 站 点 。LeapFTP 是 一 款 小 巧 而 
强大 的 FTP 工具 ， 其 友好 的 用 户 界 面 、 稳 定 的 传输 速度 、 支 持 断 点 续 传 等 功能 ， 赢得 了 广 
大 用 户 的 喜欢 。 

国 加 FE 配置 LeapFTP 并 上 传 站 点 @。 

使 用 任何 软件 上 传 站 点 前 都 要 进行 站 点 的 配置 ， 下 面 在 LeapFTP 中 进行 站 点 配置 ， 连 
接站 点 后 再 将 站 点 文件 上 传 到 服务 器 。 


国 启 动 LeapFTP, 在 打开 的 主 界面 窗口 中 选择 【站 点 了 人 [站 点 管理 器 】 命 令 , 如 图 13-18 
所 示 。 
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图 13-18 选择 “站 点 管理 器 ”命令 


国 打 开 “ 站 点 管理 器 ”对 话 框 ， 选 择 【 站 点 】/ 【新建 〗/【 站 点 】 命 令 ， 打 开 “ 创 建站 
点 ”对 话 框 . 在 “站 点 名 称 ” 文本 框 中 输入 站 点 的 名 称 , 单 击 臣 右 E 于 按钮 , 如 图 13-19 
所 示 。 

国 冯 日 “站 点 管理 器 ”对 话 框 ， 在 右 侧 的 “地 址 ”文本 框 中 输入 提供 主页 空间 的 FTP 
服务 器 的 地 址 。 取 消 选 中 回 世 s 登 录 复 选 框 ， 此 时 将 激活 下 面 的 设置 项 。 在 “用 户 名 ” 
文本 框 中 输入 服务 器 空间 用 户 名 , 在 “密码 ”文本 框 中 输入 登录 服务 器 的 密码 , 在 “本 
地 路 径 ”文本 框 中 输入 本 地 站 点 所 在 的 位 置 ， 如 图 13-20 所 示 。 

俩 设置 完成 后 单 击 EEBRsa 按 钮 保存 站 点 设置 ， 再 单 击 [ES 加 按钮 关闭 对 话 框 ， 完 成 站 点 
的 配置 。 


LeapFTP 的 使 用 其 实 同 Dreamweaver 中 的 FTP 站 点 上 传 方式 基本 相同 ， 其 最 大 的 优点 是 小 巧 ， 
运行 该 软件 对 系统 资源 的 占有 率 很 小 ， 可 以 提高 上 传 效 率 。 
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图 13-19 “创建 站 点 ”对 话 框 图 13-20 配置 FTP 服务 器 信息 


人 国运 加 LeapFTP 主 界面 ， 选 择 【FTP]/【 和 连接】 命令 进行 服务 器 连接 ， 在 窗口 右边 将 
显示 连接 状态 ， 如 图 13-21 所 示 。 
[ES 


图 13-21 连接 远程 服务 器 


俩 在 左 侧 本 地 文件 列表 中 选中 要 上 传 的 文件 ， 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 
“上 传 ” 命 令 ， 即 可 对 选中 的 文件 进行 上 传 ， 如 图 13-22 所 示 。 
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在 配置 站 点 时 可 以 直接 单 击 F 又 “按钮 进行 站 点 的 连接 ,但 以 后 如 果 要 上 传 或 下 载 站 点 中 的 文件 
仍 需 打开 “站 点 管理 器 ”对 话 框 进行 操作 。 


人 

入 
og 
和 
站 


13.2.5 “网 站 登录 软件 “登录 奇兵 ”的 使 用 


登录 奇兵 是 一 款 全 面 支持 将 网 站 免费 提交 登录 到 新 浪 、 网 易 、 搜 狐 、 百 度 、Yahool、 
Google、21CN、MSN、 HotBot、 = = 
Lycos、Tom、Aol、AlltheWeb 和 Mo Me wn 
AltaVisa 等 数 干 个 国内 外 著名 搜索 
引擎 的 网 站 推广 软件 ， 如 图 13-23 


所 示 为 登录 奇兵 软件 的 界面 。 加 一 
下 载 登录 奇兵 并 安装 后 ， 启 动 TE = 


软件 ， 首 先 要 填写 自己 登录 的 网 站 
的 相关 信息 ,根据 其 提示 正确 填写 ， 
最 主要 的 就 是 网 站 关键 字 的 填写 ， 
要 反映 出 网 站 提供 的 主要 服务 和 内 
容 ， 还 要 独特 。 填 写 好 之 后 单 击 左 
侧 的 葬 或 项 按钮 ， 按 提示 进行 登录 
即 可 。 


图 13-23 登录 奇兵 软件 界面 


13.3 ”精通 实例 一 一 为 网 页 添加 特殊 元 素 


本 章 的 精通 实例 将 在 原 有 网 页 的 基础 上 ， 为 首页 文件 设置 自动 跳 转 ， 使 其 
在 10 秒 后 跳 转 到 主页 页 面 ， 并 添加 “ 设 为 主页 ”和 “添加 到 收藏 夹 ” 超 
级 链接 ， 最 终 效果 如 图 13-24 所 示 。 
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图 13-24 添加 了 特殊 元 素 的 网 页 效果 
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设置 自动 跳 转 通常 用 在 一 个 网 站 的 起 始 欢迎 页 面 ， 该 页 面 不 需要 太 多 的 内 容 ， 主 要 起 到 欢迎 和 
吸引 用 户 的 效果 。 
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13.3.1 行业 分 析 


本 例 制作 的 网 页 是 在 原 网 页 的 基础 上 添加 一 些 特殊 效果 ， 这 些 操作 其 实 很 简单 ， 但 是 

对 于 很 多 网 页 而 言 ， 又 非常 实用 。 
通过 本 例 的 综合 演示 ,将 使 用 户 对 网 页 的 具体 设计 和 一 些 细节 布置 有 更 进一步 的 了 解 ， 
本 例 主要 分 为 3 个 方面 来 实现 ， 即 添加 个 性 化 网 页 图 标 、 添 加 “ 设 为 主页 ”超级 链接 和 添 
加 “添加 到 收藏 夹 ” 超 级 链接 。 各 方面 的 实现 需 注意 以 下 几 点 。 

跳 转 页 面 : 该 步 操作 只 需 在 网 页 中 添加 相应 的 代码 即 可 ,但 需要 注意 的 是 ， 一 般 在 

打开 网 站 的 第 一 个 页 面 中 设置 跳 转 ， 并 指定 跳 转 到 网 站 的 主页 。 

添加 “ 设 为 主页 ”超级 链接 : 该 步骤 只 需 添加 正确 的 代码 即 可 ， 需 注意 的 是 代码 中 

所 指定 的 网 址 是 该 网 站 的 永久 性 IP 地 址 或 国定 域名 。 

添加 “添加 到 收藏 夹 ”超级 链接 : 其 操作 同 添加 “ 设 为 主页 ”超级 链接 基本 相同 ， 

同样 需要 有 固定 的 网 站 地 址 或 域名 ， 以 及 网 站 名 称 的 准备 。 


13.3.2 ”操作 思路 


为 更 快 完成 本 例 的 制作 ， 并 尽 可 能 运用 本 章 讲解 的 知识 ， 本 例 的 操作 思路 如 下 。 


13.3.3 ”操作 步骤 


下 面 介绍 为 网 页 添加 自动 跳 转 、“ 设 为 主页 ”和 “添加 到 收藏 夹 ” 超 级 链接 。 其 操作 步 
又 如 下 : 
光盘 \ 素 材 \ 第 13 章 \jiying\index.html 
人 见 ”光盘 \ 效 果 \ 第 13 章 \jiying\index.html 
“各 可 。 光盘 \ 实 例 演示 \ 第 13 章 \ 为 网 页 添加 特殊 元 素 > 
国 启 动 Dreamweaver CS6, 打开 网 页 文件 “index.html”, 切换 到 代码 视图 ， 在 <head> 
</head> 标 签 间 添加 代码 “<head><meta http-equiv="refresh" content="10;URL= 
Untitled-1.htmI"/>”"， 如 图 13-25 所 示 。 
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本 例 的 3 个 主要 操作 步骤 可 以 颠倒 顺序 ， 只 要 代码 正确 、 位 置 正确 ,设置 顺序 对 于 整体 的 效果 
没有 太 大 的 影响 。 
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国 切 换 田 设计 祝 田 ， 在 网 页 左上 方 的 位 置 输入 文本 “ 设 为 主页 ”和 “添加 到 收藏 夹 ”， 
设置 字体 大 小 为 16， 选 中 “ 设 为 主页 ”文本 ， 在 “属性 ”面板 的 “链接 ”下拉 列表 
框 中 输入 “#” 符 号 ， 按 “Enter” 键 创建 空 链接 。 

国 挝 中 “添加 到 收藏 夹 ” 文本， 在 “属性 ”面板 的 “链接 ”下 拉 列 表 框 中 输入 
“JavaScript:addFav();”， 按 “Enter” 键 ,文本 效果 如 图 13-26 所 示 。 


<head> 
<meta http-equiv="refresh" content="10;URL=Untitled-1.html"/> 
<title> 吉 英 精 表 </title> 


图 13-25 ”添加 跳 转 代码 图 13-26 ”为 文本 添加 链接 
国 再 切换 到 代码 视图 ， 在 “ 设 为 主页 ”前 的 “"#"” 代 码 后 添加 代码 “onclick="this.style. 
behavior='url(#default#homepage)'; this.setHomePage (http://www. verycool.com 
/);"， 如 图 13-27 所 示 。 


oy 
<div id="top"> 

<p><a href="#"onclick="this.style.behavior='url (#default#homepage) ' ;| 
this. setHomePage ('http://ww.jiying. com/');" 


> 设 为 主页 </a></p> 


图 13-27 输入 设 为 主页 代码 
人 图 在 <head></head> 标 签 之 间 添 加 收藏 网 页 的 代码 ， 如 图 13-28 所 示 。 


ca hrer-"Javascripr oddFav() ， "> 这 加 到 路 巷 天 </a></Pp> 
<SCRIPT language=JavaScript> 


fanction addFav(){ 
window.external.AddFavorite('http://www.eagle.com', ' 吉 英 精 表 '); 
fanction MM_openBrNindow (theURL, winName, features) { 
window.open (theURL, winName, features); 
} 


(</SCRIPT> 


13-28 添加 收藏 代码 
园 完 成 后 保存 网 页 并 预览 , 如 果 10 秒 不 进行 操作 , 将 自动 跳 转 到 指定 的 页 面 , 单 击 “ 设 
为 主页 ”超级 链接 ， 将 打开 “添加 或 更 改 主 页 ”对 话 框 。 单 击 “ 添 加 到 收藏 夹 ”超级 
链接 ， 将 打开 “添加 收藏 ”对 话 框 ， 如 图 13-29 所 示 。 


三 1Y 和 二 基业 去 


ES 
2 YY、 >、 


13-29 ”添加 收藏 


当 在 页 面 中 单 击 了 超级 链接 后 ， 页 面 便 不 会 执行 自动 跳 转 操作 ， 如 需 跳 转 ， 可 刷新 一 下 页 面 ， 
所 以 ， 用 户 还 可 考虑 在 页 面 中 添加 手动 跳 转 的 超级 链接 。 


-oO 
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13.4 ”精通 练习 


本 章 主要 介绍 了 一 些 比较 实用 的 网 页 设计 技巧 和 常用 的 网 页 制作 辅助 软 
件 ， 下 面 将 通过 两 个 练习 对 部 分 知识 进行 巩固 。 


13.4.1 ”制作 一 个 跳 转 网 页 并 禁止 用 户 保存 


本 次 练习 将 制作 一 个 自动 跳 转 的 页 面 ， 使 网 页 在 5 秒 后 跳 转 到 指定 的 页 面 ， 为 了 保护 
该 页 面 内 容 ， 并 设置 禁止 保存 功能 ， 效 果 如 图 13-30 所 示 。 


图 13-30 禁止 保存 页 面 


光盘 \ 素 材 \ 第 13 章 \yu 
光盘 \ 效 果 \ 第 13 章 \yuvyu.html 
es 光盘 \ 实 例 演示 \ 第 13 章 \ 制 作 一 个 跳 转 网 页 并 禁止 用 户 保存 >>>>>> 
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该 练习 的 操作 思路 与 关键 提示 如 下 。 


党 关键 提示 : 


制作 本 例 ， 需 注意 以 下 几 点 : 

| 2 在 制作 时 可 以 在 自己 设计 的 网 页 中 进行 操作 ， 也 可 以 在 提供 的 素材 文件 中 完善 。 
| /3 添加 代码 的 地 方 一 定 要 正确 ， 否 则 不 但 不 能 实现 效果 ， 反 而 可 能 引起 错误 。 

人 3 添加 跳 转 代码 时 ， 确 保 跳 转 目标 页 面 的 路 径 和 名 称 准 确 。 


通过 保存 网 页 的 方式 ， 可 以 将 一 个 网 页 中 所 插入 的 图 片 、 动 画 等 元 素 保存 在 文件 夹 中 ， 不 但 达 
到 了 保存 网 页 的 作用 ， 还 达到 了 保存 网 页 元 素 的 作用 。 


E32 
go 
和 
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13.4.2 ”使 用 Photoshop 处 理 图 像 


本 次 练习 将 使 用 Photoshop 对 网 页 图 像 进行 简单 处 理 ， 然 后 保存 为 网 页 格式 图 像 ， 如 
图 13-31 所 示 为 处 理 图 像 的 窗口 。 


图 13-31 使 用 Photoshop 处 理 网 页 图 像 


光盘 \ 素 材 \ 第 13 章 \img1.j 
(es 光盘 效果 \ 第 13 剖 \img1.pns 


人 光盘 ”光盘 \ 实 例 演示 \ 第 13 访 站 由 Photoshop 处 理 图 像 > 
该 练习 的 操作 思路 与 关键 提示 如 下 。 


< 路 : 


关键 提示 : 


对 于 本 例 操 作 ， 可 参考 以 下 几 点 提示 : 
打开 文件 可 以 选择 【文件 】/ 代 打开】 命令 ， 在 打开 的 对 话 框 中 选择 文件 ， 也 可 直接 从 文件 
夹 中 拖 动 文件 到 Photoshop 窗口 界面 。 
裁剪 图 像 可 单 击 界面 左 侧 的 “裁剪 工具 ” 国 . 
选择 【文件 】/【 存 储 为 Web 所 用 格式 】 命 令 可 进行 网 页 图 像 格 式 的 存储 。 


ey pp 
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Photoshop 是 设计 、 制 作 、 美 化 和 维护 网 站 过 程 中 不 可 或 缺 的 工具 , 它 主要 用 于 处 理 图 像 文件 ， 
为 用 户 提供 了 更 加 便捷 的 图 形 图 像 处 理 功能 。 


1 
| 在 发 布 Dreamweaver 之 初 ， 原 Macromedia 公司 专门 为 网 页 设计 者 开发 了 著名 ! 
! 的 三 款 网 页 设计 及 辅助 软件 ， 并 称 之 为 网 页 三 剑客 。 其 包括 Macromedia ! 
! Dreamweaver、 Macromedia Fireworks 和 Macromedia Flash， 分 别 用 于 网 页 设计 、 网 ! 
! 页 图 像 处 理 和 网 页 动画 制作 , 并 且 这 3 种 软件 能 相互 无 缝合 作 , 如 可 以 在 Fireworks | 
1 中 做 好 主要 页 面 ， 然 后 导出 ， 在 Dreamweaver 中 加 以 修改 ， 添 加 链接 等 。 后 来 由 于 1 
1! Adobe Photoshop 的 强大 功能 占据 了 图 片 处 理 的 绝 大 优势 ， 以 及 Adobe 公司 收购 | 
Macromedia 公司 后 继续 对 相关 软件 进行 优化 。 目 前 对 很 多 用 户 来 说 ，Photoshop 取 ! 


代 了 Fireworks 的 图 像 处 理 职能 ， 成 为 了 新 的 网 页 三 剑客 成 员 。 i 


关于 网 页 图 像 的 处 理 和 Flash 动画 的 制作 ， 还 需要 对 相应 的 软件 进行 深入 的 学 习 ， 本 书 主要 介 
绍 Dreamweaver 网 页 制作 方面 的 知识 ， 对 于 其 他 设计 方面 的 知识 未 能 深入 讲解 。 


、 网 页 制作 技巧 及 辅助 软件 第 13 章 | 
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第 14 章 … 


对 于 信息 量 比较 大 ， 或 者 向 浏览 者 提供 交互 作用 的 网 
言 ， 使 用 普通 的 静态 网 页 是 不 能 满足 需求 的 ， 对 此 ， 
“需要 通过 动态 网 页 技术 ， 扩 充 网 站 的 功能 。 动 态 网 页 不 仅 

功能 强大 ， 其 最 大 的 特点 还 在 于 容易 管理 和 维护 ， 管 理 人 


站 而 言 


只 


动态 网 页 开发 流程 
lS 和 动态 站 点 的 配置 


人 


但 是 


对 整个 网 页 制作 环境 进行 配置 ， 并 选择 相关 的 软件 和 语言 


用 更 新 数据 ， 而 不 用 对 整个 页 面 进行 重新 设计 和 和 制作。 
动态 网 页 的 制作 较 静 态 网 页 要 复杂 很 多 ， 用 户 还 需要 


下 面 将 简单 介绍 动态 网 页 的 制作 准备 及 制作 方法 。 


Web 服 务 器 


动态 网 页 开发 语 


注 徊 山 讨 


兰 
一 


“naw | 


动态 网 页 是 可 以 动态 产生 网 页 信息 的 一 种 网 页 制作 技术 。 其 最 主要 的 目的 
是 与 数据 库 进 行 交互 ， 即 从 数据 库 中 动态 提取 数据 ， 然 后 产生 新 的 页 面 并 
显示 在 浏览 器 中 。 


作为 一 般 的 静态 网 页 ， 在 制作 好 页 面 后 该 页 面 没有 被 网 页 制作 者 重新 修改 前 ， 打 开 后 
浏览 器 显示 的 页 面 内 容 都 是 一 样 的 ,而 动态 网 页 不 一 样 ,同样 名 称 的 动态 网 页 ( 如 info.asp )， 
当 传 递 不 同 参 数 ( 如 info.asp?id=1243、info.asp?id=1245 ) 后 所 打开 的 页 面 内 容 都 不 相同 。 

动态 网 页 的 特点 是 当 用 户 单 击 一 个 链接 ( 如 info.asp?id=1243 ) 后 ， 服 务 器 端 即 从 数据 


库 中 查找 “id” 为 “1243” 


页 信息 的 技术 ， 大 大 减少 了 网 页 制作 者 的 了 


的 数据 信息 ， 然 后 将 其 显示 在 浏览 器 


h。 通 过 这 种 动态 生成 网 


后 只 需 制作 一 个 页 面 即 可 


咱 普 浏 
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您 还 本 登录 ,请 先 登录 


[ 作 量 ， 如 有 100 条 信息 需要 显示 ， 如 果 用 静态 
页 制作 ， 需 要 做 100 个 网 页 ， 而 用 动态 网 页 技术 只 需 将 这 100 条 信息 先 输入 数据 库 中 ， 
[完成 100 条 信息 的 显示 。 同 时 ， 要 修改 页 面 内 容 时 也 只 需 修改 


据 库 中 的 数据 即 可 ， 而 不 用 重新 制作 一 个 静态 网 页 。 它 还 可 以 通过 收集 用 户 在 表单 中 填 
的 信息 、 单 击 的 链接 或 按钮 等 操作 进行 相应 的 处 理 ， 并 可 以 将 数据 保存 到 数据 库 中 或 返 
单 击 链接 对 应 的 数据 信息 等 ， 如 图 14-1 所 示 为 一 个 基础 的 论坛 型 动态 网 页 。 


用 户 注册 提出 问题 


志 窒 醒目 ， 提问 音 本 提问 内容 回复 内 容 提交 了 |。 显示 全 部 | 


4 于 在 电脑 不 用 光 3E 了， 能 不 能 把 雍 村 发 到 我 gt 和 苯 2013-5-17 4.30.20) 


您 间 : 我 网 KBjphotezhop C2 图 像 处 理 价 的 书 ,可 以 必 素 村 给 我 思 ? 没有 光驱 ， 无 法 使 用 素材! 


提问 者: 小 帮 贡 苏 


我 管 : ”正在 处 理 中 ， 
| 提问 者 最 折 十 由 可 路 - 


间 : 瑰 在 电 语 不 用 光 手 了 能 不 能 招 素 村 发 到 和 gj 箱 [小 才 央 黄 ] (2013-5-17 4 39 28 | 


[正在 处 理 ] 


论坛 最 近 二 十 五 由 问题 


间 : 也 在 电 语 不 用 光 虹 了 ， 天 不 能 招 素 村 冯 玉 H9H 和 [小豆 贡 获 ] (2013-5-17 4:38:26， 


正在 处 理 | 


元 值 卡 之 公用? [s905010] (2013-5-13 15:59:50) 【正在 趟 一] 


具 ) 在 哪 于 下 载 ? [ 考 务 处 ] (2013-5-12 13:01:42) [正在 处 理 ] 


图 14-1 动态 显示 内 容 的 网 页 


14.2 ”数据 库 基 础 


所 谓 数据 库 ， 就 是 长 期 存储 在 电脑 中 的 、 有 组 织 的 、 可 供 共享 的 数据 集合 。 
数据 库 管理 系统 是 电脑 中 用 于 存储 和 处 理 大 量 数 据 的 软件 系统 。 它 的 种 类 
非常 多 ， 下 面 将 分 别 进行 介绍 。 


在 数据 库 管理 系统 中 可 以 进行 数据 的 处 理 ， 这 种 处 理 不 仅 包括 简单 的 编辑 或 数字 运算 ， 还 包括 
对 数据 的 搜索 、 筛 选 及 提取 等 。 数 据 库 和 数据 库 管理 系统 的 结合 就 称 为 数据 库 系统 ， 这 里 介绍 的 数 


据 库 实际 上 是 指数 据 库 管理 系 


统 。 


SS 
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加 
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14.2.1 Access 


Access 是 Office 办 公 组 件 的 一 个 成 员 ， 是 一 种 入 门 级 的 数据 库 管 理 系统 ， 它 具有 简便 
易 用 、 支 持 的 SQL 指令 最 齐全 、 消 耗资 源 比 较 少 的 优点 ， 常 用 于 中 小 型 网 站 中 。 用 
ASP+Access 打造 动态 网 站 是 许多 用 户 的 首选 。 


国 村 本》> 使 用 Access 创建 数据 库 ®。@ 


下 面 将 在 Access 2003 中 创建 一 个 数据 库 ， 在 数据 库 中 设计 表 并 输入 数据 。 
国 左 Windows 7 桌面 选择 【开始 】 代 所 有 程序 】 代 Microsoft Office】/ 【Microsoft Office 
Access 2003】 命令， 打开 Access 2003 工作 界面 ， 如 图 14-2 所 示 。 
国 半 择 【文件 ] /【 新 建 】 命 令 ， 在 右 侧 任务 窗 格 中 单 击 “ 空 数据 库 ” 超 级 链接 ， 如 
图 14-3 所 示 。 


14-2 ”Access 2003 工作 界面 图 14-3 单 击 “ 空 数据 库 ” 超 级 链接 
国 在 打开 的 “文件 新 建 数据 库 ” 对 话 框 中 的 “保存 位 置 ” 下 拉 列 表 框 中 设置 数据 库 文件 
的 保存 位 置 ， 在 “保存 类 型 ”下 拉 列 表 框 中 选择 “所 有 文件 ”选项 ， 在 “文件 名 ” 文 
本 框 中 输入 数据 库 文件 的 名 称 ， 如 “note.asa”， 如 图 14-4 所 示 。 
国 单 十 G9 校 钮 ,在 打开 的 数据 库 窗口 中 双击 “使 用 设计 器 创建 表 ” 选项 ， 如 图 14-5 
所 示 。 


[Er EE 
各 二 ee 


Xm [es ] 加 
"| mun [Fo |0 引 选择 | = 


14-4 “文件 新 建 数据 库 ” 对 话 框 图 14-5 ”数据 库 窗 口 
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会 动 的 网 页 (如 网 页 中 含 Flash 动画 、Gif 动画 ) 并 不 是 动态 网 页 ， 这 样 的 网 页 最 多 称 为 多 媒体 


网 页 ， 而 不 能 称 为 动态 网 页 ， 因 为 它 未 与 服务 器 端 发 生 交互 。 


国 在 打开 的 窗口 中 将 鼠标 光标 定位 在 “字段 名 称 ”下 的 单元 格 中 , 输入 “id”， 按 “Enter" 
键 ， 鼠 标 光标 跳 到 “数据 类 型 ”单元 格 中 ， 单 击 “ 数 据 类 型 ”单元 格 中 的 回 按钮 ， 在 
弹出 的 下 拉 列 表 框 中 选择 “自动 编辑 ”选项 ， 如 图 14-6 所 示 。 

俩 在 该 行 的 任意 位 置 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “主键 ”命令 ， 设 置 该 字 
段 为 主键 。 

俩 将 鼠标 光标 定位 到 第 2 行 “字段 名 称 "单元 格 中 , 用 相同 的 方法 依次 设计 其 他 字段 (不 
需要 进行 设置 主键 的 操作 )， 完 成 后 如 图 14-7 所 示 。 


图 14-6 设计 表 结 构 图 14-7 完成 表 结 构 设 计 
国 远 ## 【文件 】/【 保 存 〗 命 令 ， 在 打开 的 “另存 为 ”对 话 框 的 “ 表 名 称 ” 文 本 框 中 输 
”入 表 的 名 称 ， 如 “note”， 如 图 14-8 所 示 。 
国 单 击 EE 本 加 按 钮 ， 完成 表 的 保存 ， 单 击 “ 表 设计 ”工具 栏 上 的 “视图 ”按钮 加， 在 
打开 的 窗口 中 即 可 输入 数据 ， 如 图 14-9 所 示 ， 输 入 完 数据 后 直接 关闭 窗口 即 可 。 


14-8 “另存 为 ”对 话 框 14-9 输入 数据 


14.2.2 SQL Server 


SQL Server 是 一 种 大 中 型 数据 库 管理 和 开发 软件 , 由 Microsoft 公司 推出 。 它 具有 使 用 
方便 、 有 良好 的 可 扩展 性 等 优点 ， 尤 其 是 它 支 持 包 括 便携 式 系统 和 多 处 理 器 系统 在 内 的 各 


在 一 个 数据 库 中 可 以 创建 多 个 表 ， 所 以 在 一 个 网 站 中 ， 最 好 只 使 用 一 个 数据 库 ， 然 后 在 数据 库 
中 创建 不 同 的 表 来 满足 建站 需求 。 


二 
D 
OO 
< 
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种 处 理 系 统 ， 这 个 功能 除了 它 之 外 ， 只 有 Oracle 和 其 他 一 些 昂贵 的 数据 库 才 具备 。 它 在 网 
站 的 后 台数 据 库 中 有 着 非常 广泛 的 应 用 ， 是 制作 大 型 网 络 数据 库 的 一 个 理想 选择 。 其 使 用 
比较 复杂 ， 下 面 就 服务 管理 器 的 启动 和 数据 库 的 创建 进行 简单 介绍 。 


1. 服务 管理 器 的 启动 和 退出 


SQL Server 安装 完成 之 后 ， 服 务 管 理 器 会 在 开机 时 自动 运行 ， 在 任务 栏 中 看 到 服务 管 
理 器 的 指示 图 标 ， 如 图 14-10 所 示 。 双 击 服务 管理 器 的 指示 图 标 副 ， 即 可 打开 SQL Server 
服务 管理 器 窗口 ， 如 图 14-11 所 示 。 


刷新 服务 00. 


|] 开始 /地 妆 ( 
| 和 暂停) 
| 售 上 0) 
厂 当 启动 0s 时 自动 启动 服务 和) 
EE ~ WTI S001ST654I “IESGLServer 
14-10 服务 管理 器 指示 图 标 14-11 SQL Server 服务 管理 器 窗口 
在 SQL Server 服务 管理 器 窗口 中 列 出 了 可 管理 的 服务 器 和 服务 列表 , 并 显示 了 当前 服 
务 的 状态 。 殴 、 芭 和 区 图 标 分 别 表 示 当 前 服务 处 于 运行 、 暂 停 和 停止 状态 ， 通 过 单 击 了 | 
下 条理 | 按钮 ， 可 达到 开始 /继续 、 暂 停 和 停止 当前 服务 的 作用 。 为 了 确保 数据 的 安全 ， 在 
停止 服务 前 ， 应 先 暂 停 服务 ， 这 样 ， 新 连接 的 用 户 将 无 法 登录 ， 而 已 登录 的 用 户 可 继续 执 
行 操作 ， 然 后 可 通知 用 户 服务 将 要 停止 ， 请 尽快 完成 操作 ， 停 止 服务 。 
停止 服务 或 关闭 SQL Server 服务 管理 器 窗口 ， 服 务 管理 器 仍 在 运行 ， 可 在 任务 栏 中 看 
到 服务 管理 器 的 指示 器 图 标 。 要 结束 SQL Server 服务 管理 器 ， 可 在 服务 管理 器 的 指示 图 标 
茅 上 单 击 鼠 标 右 键 ， 在 弹出 的 快捷 菜单 中 选择 “退出 ”命令 。 


2. 创建 数据 库 及 表 


要 在 SQL Server 中 实现 数据 库 管 理 ， 同 样 需要 创建 数据 库 和 数据 表 ， 通 过 SQL Server 
企业 管理 器 可 以 轻松 地 创建 数据 库 和 表 。 
a- 


EPE》> 创 建 SQL Server 数据 库 和 表 ©® 
下 面 将 在 SQL Server 企业 管理 器 中 创建 一 个 名 为 “note” 的 数据 库 ， 并 在 数据 库 中 创 
建 一 个 “note” 表 。 
国 挝 择 【开始 1 /【 所 有 程序 】/ 【Microsoft SQL Server】/【 企 业 管 理 器 】 命 令 ， 启动 
SQL Server 企业 管理 器 。 
国 在 企业 管理 器 窗口 左 侧 展开 目录 树 ， 并 在 “数据 库 ” 选 项 上 单 击 鼠标 右键 ， 在 弹出 的 


天 国 


在 安装 SQL Server 时 ， 需 要 注意 设置 管理 员 密 码 ， 这 样 可 以 获得 更 高 的 安全 性 。SQL Server 有 
时 也 简写 为 MSSQL。 
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_ 快捷 菜单 中 选择 “新 建 数据 库 ” 命 令 ， 如 图 14-12 所 示 。 
国 在 打开 对 话 框 的 “常规 ”选项 卡 的 “名 称 ” 文 本 框 中 输入 要 创建 数据 库 的 名 称 ， 如 
“note”， 如 图 14-13 所 示 。 
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排序 规则 名 称 : 《服务 器 默认 设置 ) 了 = 
确证 阳光 都 助 
14-12 选择 “新 建 数据 库 ” 命 令 图 14-13 输入 数据 库 的 名 称 


俩 选择 “数据 文件 ”选项 卡 ， 单 击 “ 数 据 库 文件 ” 栏 的 “文件 名 ” 列 下 的 单元 格 ， 并 输 
入 新 的 数据 库 文件 名 称 ， 如 图 14-14 所 示 。 

俩 单 击 “ 位 置 * 列 下 的 第 一 个 国 按 钮 ,在 打开 的 对 话 框 上 方 列表 框 中 选择 保存 数据 库 广 
件 的 位 置 ， 在 “文件 名 ”文本 框 中 输入 数据 库 文件 的 名 称 ， 如 图 14-15 所 示 。 
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图 14-14 输入 数据 库 文件 的 名 称 图 14-15 设置 数据 库 文件 保存 位 置 


匡 再 次 单 击 [C 碎 | 按钮 关闭 “数据 库 属性 ”对 话 框 ， 企 业 管 理 器 窗口 右 侧 将 看 到 新 创 
建 的 数据 库 ， 如 图 14-16 所 示 ， 在 其 上 单 击 鼠 标 右键 , 在 弹出 的 快捷 菜单 中 选择 【新 


py “查找 数据 库 文件 ”对 话 框 ， 返 回 到 “数据 库 属性 ”对 话 框 中 。 


本 章 介绍 的 版 本 是 SQL Server 2000, 它 是 一 款 比 较 经 典 的 版 本 ， 尽管 目 前 已 经 出 了 SQL Server 
2005、SQL Server 2008 和 SQL Server 2012， 很 多 用 户 还 是 习惯 使 用 SQL Server 2000。 
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[ 攻 ，， 到 中 文 版 Dreamweaver CS6 网 页 制作 从 入 门 到 精通 GY | 


建 ]/【 表 】 命令 . 

国 在 打开 窗口 的 “ 列 名 ” 列 下 的 单元 格 中 单 击 并 输入 列 名 “id”， 按 “Enter” 键 ， 鼠 标 
光标 自动 移 到 “数据 类 型 ”下 的 单元 格 中 ， 单 击 也 | 按钮 ， 在 弹出 的 下 拉 列 表 框 中 选 
择 “char” 选 项 ， 再 按 “Enter” 键 进入 下 一 单元 格 中 ， 在 其 中 输入 数据 长 度 ( 某 些 
类 型 的 数据 长 度 是 不 能 修改 的 ), 单 击 “ 允 许 空 "下 的 留 按钮 取消 选中 状态 , 如 图 14-17 
所 示 。 
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14-16 ”创建 的 数据 库 图 14-17 设计 表 结 构 


国 使 用 相同 的 方法 完成 其 他 表 结构 的 设计 ， 并 在 “id” 行 任意 位 置 单 击 鼠 标 右键 ， 在 弹 
出 的 快捷 菜单 中 选择 “设置 主键 ”命令 ， 如 图 14-18 所 示 。 

人 玩 完 成 后 单 击 工具 栏 上 的 加 按钮 ， 打开 “选择 名 称 ” 对 话 框 ， 在 “输入 表 名 ”文本 框 中 
输入 表 名 ， 如 图 14-19 所 示 。 
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图 14-18 设置 主键 图 14-19 保存 表 
俩 单 击 己 蚂 _] 按 钮 完成 表 的 保存 操作 ， 单 击 窗口 右上 角 的 医 国 按钮 关闭 设计 表 窗 口 ， 返 
回 到 企业 管理 器 窗口 。 
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SQL Server 的 功能 比较 强大 ， 在 SQL Server 中 ， 除 了 可 以 存储 一 般 的 文本 数据 外 ,还 可 以 存储 


二 进 制图 像 数 据 。 


所 | 


国 在 左 人 出 罕 口中 找到 新 添加 的 数据 库 “note” 并 双击 ， 再 双击 展开 目录 树 中 的 “ 表 ” 选 
”项 ， 然 后 在 窗口 右 侧 找到 新 创建 的 表 文 件 “note”， 在 其 上 单 击 鼠 标 右键 ， 在 弹出 的 
快捷 莱 单 中 选择 【打开 表 】〗/【 返 回 所 有 行 〗 命 令 ， 如 图 14-20 所 示 。 

国 在 打开 的 窗口 中 印 可 输入 相应 的 数据 ， 如 图 14-21 所 示 . 输入 完 所 有 数据 后 ， 关 闭 窗 
口 即 可 。 
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图 14-20 选择 “返回 所 有 行 ” 命 令 图 14-21 输入 数据 


14.2.3 MySQL 


MySQL 是 一 个 多 用 户 、 多 线程 的 SQL 数据 库 服务 器 。 它 由 一 个 服务 器 守护 程序 mysqld 
和 很 多 不 同 的 客户 程序 与 库 组 成 ， 是 一 种 客户 机 /服务 器 结构 。 它 具有 快速 、 易 用 等 优点 ， 
特别 是 对 文件 和 图 像 的 快速 存储 和 提取 。 另 外 ， 它 还 是 开源 软件 ， 不 需要 付费 即 可 进行 使 
用 。 使 用 PHP+MySQL+Apache 开发 Web 应 用 程序 是 公认 的 最 佳 搭配 。 

MySQL 的 数据 管理 通常 由 phpMyAdmin 以 可 视 化 的 方法 实现 ( 当然 也 可 以 结合 SQL 
命令 手动 实现 ， 不 过 较 麻 烦 )。phpMyAdmin 是 用 PHP 语言 开发 Web 应 用 程序 ， 因 此 ， 需 
要 PHP 和 Web 服务 器 的 支持 。 安 装 好 Apache、PHP 5 和 MySQL 并 配置 好 后 ， 可 以 将 下 载 
的 phpMyAdmin 解压 到 Apache 安装 目录 下 的 “htdocs”( 默认 情况 下 是 该 目录 ， 如 果 在 配 
置 Apache 时 将 站 点 根 目 录 更 改 到 其 他 目录 中 ， 则 应 复制 到 更 改 到 的 目录 中 ) 中 ， 然 后 启 
动 浏览 器 访问 即 可 。 


14.2.4 _ Oracle 


Oracle 是 主流 的 大 型 关系 型 数据 库 ， 它 不 仅 支持 多 平台 ， 还 具有 无 范式 要 求 、 采 用 标 
准 的 SQL 结构 化 查询 语言 、 支 持 大 至 2GB 的 二 进 制 数据 、 分 布 优化 多 线索 查询 等 优点 。 
Oracle 采取 快照 SNAP 方式 完全 消除 了 分 布 读 写 冲突 ， 数 据 安全 级 别 为 C2 级 ( 最 高 级 )。 
特别 适合 制造 业 管 理 信息 系统 和 财务 应 用 系统 。Oracle 7.1 以 上 版 本 服务 器 支持 


0 -wd 


网 站 中 使 用 了 数据 库 后 ， 在 申请 网 页 空间 时 需要 特别 留意 服务 商 所 提供 的 空间 是 否 支持 所 使 用 
的 数据 库 ， 以 免 网 站 不 能 正常 运行 。 
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DN 
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CD 
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1000~10000 个 用 户 。 


14.3 动态 网 页 开发 语言 


目前 主流 的 动态 网 页 开发 语言 主要 包括 ASP、ASP.NET、PHP 和 JSP 等 ， 
在 选择 开发 技术 时 ， 应 该 根据 其 语言 的 特点 ， 以 及 所 建 网 站 适用 的 平台 综 
合 进行 考虑 。 下 面 就 这 几 种 语言 的 特点 进行 讲解 。 


14.3.1 ASP 


ASP 是 Active Server Pages 的 缩写 ， 中 文 含义 是 “活动 服务 器 页 面 "。 从 Microsoft 推 
出 了 ASP 后 ， 它 以 其 强大 的 功能 、 简 单 易 学 的 特点 受到 广大 Web 开发 人 员 的 喜欢 。 不 过 
它 只 能 在 dw 下 使 用 ,虽然 它 可 以 通过 增加 控件 而 在 Linux 下 使 用 , 但 是 其 功能 
最 强大 的 DCOM 控件 却 不 能 使 用 。 但 ASP 作为 Web 开发 最 常用 的 工具 ， 仍 有 许多 突出 的 
特点 ， 下 面 分 别 进行 介绍 。 

简单 易学 : 使 用 VBScript、JavaScript 等 简单 易 懂 的 脚本 语言 ， 结 合 HTML 代码 ， 

即 可 快速 地 完成 网 站 应 用 程序 的 开发 。 

构建 的 站 点 维护 简便 : Visual Basic 非常 普及 ， 如 果 用 户 对 VBScript 不 熟悉 ， 还 可 
以 使 用 JavaScript 或 Perl 等 其 他 技术 编写 ASP 页 面 。 

可 以 使 用 标记 : 所 有 可 以 在 HTML 文件 中 使 用 的 标记 语言 都 可 用 于 ASP 文 件 中 。 

适用 任何 浏览 器 : 对 于 客户 端的 浏览 器 来 说 ，ASP 和 HTML 几乎 没有 区 别 ， 仅 仅 
是 后 级 的 区 别 ， 当 客户 端 提 出 ASP 申请 后 ， ee “<%” 和 “%>” 之 间 的 内 容 
解释 成 HTML 语言 并 传送 到 客户 端的 浏览 器 上 ， 浏 览 器 接受 的 只 是 HTML 格式 的 
文件 ， 因 此 ， 它 适用 任何 浏览 器 。 

运行 环境 简单 : 只 要 在 电脑 上 安装 IIS 或 PWS， 并 把 存放 ASP 文件 的 目录 属性 设 
为 “执行 >， 即 可 直接 在 浏览 器 中 浏览 ASP 文件 ， 并 看 到 执行 的 结果 。 

支持 COM 对 象 : 在 ASP 中 使 用 COM 对 象 非 常 简便 ， 只 需 一 行 代码 就 能 够 创建 一 
个 COM 对 象 的 事例 .用 户 既 可 以 直接 在 ASP 页面 中 使 用 Visual Basic 和 Visual C++ 
各 种 功能 强大 的 COM 对 象 ， 同 时 还 可 创建 自己 的 COM 对象， 直接 在 ASP 页 面 中 
使 用 。 


14.3.2 ASPNET 


ASP.NET 是 一 种 编译 型 的 编程 框架 ， 它 的 核心 是 NGWS runtime， 除 了 和 ASP 一 样 可 
以 采用 VBScript 和 JavaScript 作为 编程 语言 外 ， 还 可 以 用 Visual Basic 和 C# 来 编写 ， 这 就 
决定 了 它 功能 的 强大 ， 可 以 进行 很 多 底层 操作 而 不 必 借助 于 其 他 编程 语言 。 


本 


ASP 网 页 是 以 .asp 为 扩展 名 的 纯 文本 文件 ， 可 以 用 任何 文本 编辑 器 ( 如 记事 本 ) 对 ASP 网 页 进 
行 打 开 和 编辑 操作 。 也 可 以 采用 一 些 带 有 ASP 增强 支持 的 编辑 器 ( 如 Microsoft Visual InterDev 和 
Dreamweaver ) 简化 编程 工作 。 
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ASP.NET 是 一 个 建立 服务 器 端 Web 应 用 程序 的 框架 ， 它 是 ASP 3.0 的 后 继 版 本 , 但 并 
不 仅仅 是 ASP 的 简单 升级 ， 更 是 Microsoft 推出 的 新 一 代 Active Server Pages 脚本 语言 。 
ASP.NET 是 微软 发 展 的 新 型 体系 结构 .NET 的 一 部 分 ， 它 的 全 新 技术 架构 会 让 每 一 个 人 的 
网 络 生活 都 变 得 更 简单 ， 它 吸收 了 ASP 以 前 版 本 的 最 大 优点 并 参照 Java、Visual Basic 语 
言 的 开发 优势 加 入 了 许多 新 的 特色 ， 同 时 也 修正 了 以 前 的 ASP 版 本 的 运行 错误 。 


14.3.3 PHP 


PHP 是 编程 语言 和 应 用 程序 服务 器 的 结合 ，PHP 的 真正 价值 在 于 它 是 一 个 应 用 程序 服 
务 器 ， 而 且 它 是 开发 程序 ， 任 何人 都 可 以 免费 使 用 ， 也 可 以 修改 源 代 码 。 其 特点 如 下 。 

开放 源码 : 所 有 的 PHP 源码 都 可 以 得 到 。 
没有 运行 费用 : PHP 是 免费 的 。 
基于 服务 器 端 ，PHP 是 在 Web 服务 器 端 运 行 的 ，PHP 程序 可 以 很 大 、 很 复杂 ， 但 
不 会 降低 客户 端的 运行 速度 。 
跨 平台 : PHP 程序 可 以 运行 在 UNIX、Linux 或 者 Windows 操作 系统 下 。 
嵌入 HTML: 因为 PHP 语言 可 以 嵌入 到 HTML 内 部 ， 所 以 PHP 容易 学 习 。 
简单 的 语言 : 与 Java 和 C++ 不 同 ，PHP 语言 坚持 以 基本 语言 为 基础 ， 它 可 支持 任 
何 类 型 的 Web 站 点 。 
效率 高 : 和 其 他 解释 性 语言 相 比 ，PHP 系统 消耗 较 少 的 系统 资源 。 当 PHP 作为 
Apache Web 服务 器 的 一 部 分 时 ， 运 行 代码 不 需要 调用 外 部 二 进 制 程序 ， 服 务 器 解 
释 脚 本 不 需要 承担 任何 额外 负担 。 
分 析 XML: 用 户 可 以 组 建 一 个 可 以 读 取 XML 信息 的 PHP 版本。 
数据 库 模块 : PHP 支持 任何 ODBC 标准 的 数据 库 。 


14.3.4 JSP 


JSP ( Java Server Pages ) 是 由 Sun 公司 倡导 、 许 多 公司 参与 并 一 起 建立 的 一 种 动态 网 
页 技术 标准 。 它 为 创建 动态 的 Web 应 用 提供 了 一 个 独特 的 开发 环境 , 能 够 适应 市 场 上 包括 
Apache WebServer 和 IIS 在 内 的 大 多 数 服务 器 产品 。 
JSP 与 Microsoft 的 ASP 在 技术 上 虽然 非常 相似 ， 但 也 有 许多 区 别 ，ASP 的 编程 语言 
是 VBScript 之 类 的 脚本 语言 ，JSP 使 用 的 是 Java， 这 是 两 者 最 明显 的 区 别 。 此 外 ，ASP 与 
JSP 还 有 一 个 更 为 本 质 的 区 别 : 两 种 语言 引擎 用 完全 不 同 的 方式 处 理 页 面 中 嵌入 的 程序 代 
码 。 在 ASP 下 ，VBScript 代码 被 ASP 引擎 解释 执行 ; 在 JSP 下 ， 代 码 被 编译 成 Servlet 并 
Java 虚拟 机 执行 ， 这 种 编译 操作 仅 在 对 JSP 页 面 的 第 一 次 请 求 时 发 生 。 其 有 如 下 几 个 
竺 点 。 
动态 页 面 与 静态 页 面 分 离 : 脱离 了 硬件 平台 的 束缚 ， 以 及 编译 后 运行 等 方式 ， 大 大 
提高 了 其 执行 效率 而 逐渐 成 为 互联 网 上 的 主流 开发 工具 。 


相对 于 ASP 的 文件 类 型 (只 有 扩展 名 是 为 .asp 的 文件 来 说 )，ASP.NET 的 文件 类 型 是 十 分 丰富 
的 ， 如 .aspx (如 同 .asp)、.asmx、.sdl 和 .ascx 等 。 
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以 “<%” 和 “%>” 作 为 标识 符 : JSP 和 ASP 在 结构 上 类 似 ， 不同 的 是 在 标识 符 之 
间 的 代码 ASP 为 JavaScript 或 VBScript 脚本 ， 而 JSP 为 Java 代码 。 

网 页 表现 形式 和 服务 器 端 代码 逻辑 分 开 : 作为 服务 器 进程 的 JSP 页 面 ， 首 先 被 转换 
成 Servlet ( 一 种 服务 器 端 运 行 的 Java 程序 )。 

适应 平台 更 广 : 几乎 所 有 平台 都 支持 Java，JSP+JavaBean 可 以 在 所 有 平台 下 通行 
无 阻 。 

JSP 的 效率 高 : JSP 在 执行 以 前 先 被 编译 成 字 节 码 (Byte Code )， 字 节 码 由 Java 虚 
拟 机 ( Java Virtual Machine ) 解释 执行 ， 比 源码 解释 的 效率 高 ; 服务 器 上 还 有 字 节 
码 的 Cache 机 制 ， 能 提高 字 节 码 的 访问 效率 。 第 一 次 调用 JSP 网 页 可 能 稍 慢 ， 因 为 
它 被 编译 成 Cache， 以 后 就 快 多 了 。 

安全 性 更 高 : JSP 源 程 序 不 大 可 能 被 下 载 , 特别 是 JavaBean 程序 完全 可 以 放 在 不 对 
外 的 目录 中 。 

组 件 ( Component ) 方式 更 方便 : JSP 通过 JavaBean 实现 了 功能 扩充 。 

可 移植 性 好 :从 一 个 平台 移植 到 另外 一 个 平台 ,JSP 和 JavaBean 甚至 不 用 重新 编译 ， 
因为 Java 字 节 码 都 是 标准 的 ， 与 平台 无 关 。 在 NT 下 的 JSP 网 页 原封 不 动 地 拿 到 
Linux 下 就 可 以 运行 。 


14.4 Web 服务 器 


要 运行 数据 库 应 用 程序 还 需要 有 Web 服务 器 。Web 服务 器 也 可 称 为 HTTP 
服务 器 ， 是 根据 Web 浏览 器 的 请 求 提 供 文 件 服务 的 软件 。 常 见 的 Web 服 
务 器 包括 IIS、Apache 和 Netscape Enterprise Server 等 , 下面 分 别 进行 介绍 。 


14.4.1 1IS 


IIS ( Internet Information Server，Internet 信息 服务 ) 是 Microsoft 开发 的 功能 强大 的 
Web 服务 器 ， 它 可 以 在 Windows NT 以 上 的 系统 中 支持 ASP， 虽 然 其 不 能 跨 平 台 的 特性 限 
制 了 其 使 用 范围 ， 但 由 于 Windows 操作 系统 的 普及 ， 尤 其 是 在 国内 ，IIS 还 是 得 到 了 广泛 
的 应 用 。 

IIS 主要 提供 FTP ( 文件 传输 服务 ) HTTP ( Web 服务 ) 和 SMTP ( 电子 邮件 服务 ) 等 
服务 。 确 切 地 说 ，IIS 为 Internet 提供 了 一 个 正规 的 应 用 程序 开发 环境 。 在 早期 的 Windows 
XP 等 操作 系统 中 , 需要 单独 进行 IIS 的 安装 , 在 Windows 7 操作 系统 中 则 已 经 集成 了 HS 7 
组 件 ， 但 是 默认 并 没有 打开 该 功能 ， 用 户 还 需要 手动 开启 IIS。 


E 可 局 必 上 本 区 > 开启 Windows 7 中 的 IIS 功能 @ 


下 面 将 在 Windows 7 操作 系统 中 打开 Internet 信息 服务 功能 。 
俩 半 择 【开始 〗/【 控 制 面板 】 命 令 ， 打 开 “ 控 制 面板 ”窗口 ， 在 其 中 单 击 “ 程 序 和 功 


全 


常见 的 开发 环境 搭配 有 ASP/ASPNET+Windows+IIS+Access/MSSQL/Oracle、PHP+Windows/Linux+ 
Apache+MySQL/MSSQL/Sybase/Oracle 和 JSP+Windows+Tomcat/Apache/Weblogic+MyYSQL/MSSQL/Sybase/ 
Oracle. 


、 "nar | 


能 ”超级 链接 ， 打 开 “ 程 序 和 功能 ”窗口 。 
国 在 窗口 左 侧 的 窗 格 中 单 击 “ 打 开 或 关闭 Windows 功能 ”超级 链接 ,如 图 14-22 所 示 。 
国 打 开 “Windows 功能 ”窗口 ， 在 其 功能 列表 框 中 单 击 “Internet 信息 服务 ”选项 前 的 

复 选 框 ， 使 其 呈 选 中 状态 ， 如 图 14-23 所 示 。 用 户 也 可 展开 该 目录 手动 选中 需要 打开 
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图 14-22 “程序 和 功能 ”窗口 图 14-23 “Windows 功能 ”窗口 


辆 单 击 EBD 撤 包 ， 将 打开 正在 更 改 功能 的 提示 框 ， 等 待 其 安装 完成 后 将 自动 关闭 
“Windows 功能 ”窗口 ， 完 成 lIS 的 安装 。 


14.4.2 Apache 


Aapche 是 一 款 非常 优秀 的 HTTP 服务 器 ,是 目前 世界 市 场 占 有 量 最 高 的 HTTP 服务器。 
它 为 网 络 管理 员 提 供 了 非常 多 的 管理 功能 ,主要 用 于 UNIX 和 Linux 平台 上 ,当然 , Windows 
平台 也 可 以 使 用 。 

Apache 的 安装 很 简单 ， 直 接 运行 下 载 的 msi 安装 程序 即 可 ， 但 Apache 的 配置 则 相对 
比较 复杂 。 


14.5 动态 网 站 的 开发 流程 及 配置 


制作 动态 网 站 前 ， 一 般 还 需要 对 服务 器 和 站 点 进行 合适 的 配置 ， 只 有 完成 
了 各 种 配置 ， 才 能 进行 网 站 的 开发 。 因 此 ， 还 必须 了 解 动态 网 页 的 一 般 开 
发 流程 ， 然 后 再 按照 流程 依次 进行 操作 。 


14.5.1 动态 网 页 开发 流程 


要 创建 动态 网 站 ， 首 先 应 确定 使 用 何 种 语言 ( ASP/ASPNET/PHP/JSP 或 其 他 语言 )、 


0 -用 wd 国 … 


在 安装 IIS 时 需要 注意 ， 一 般 Windows 7 中 默认 不 会 安装 对 asp 等 文件 的 支持 ， 可 以 展开 “万 
维 网 服务 器 ”目录 ， 选 中 其 中 的 开发 语言 复 选 框 ， 否 则 无 法 在 本 地 电脑 上 预览 动态 网 页 。 
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中 卉 中 文 版 Dreomweaver C56 网 页 制作 从 入 门 到 精通 G 多 
何 种 数据 库 ( Access/MSSQL/MySQL/Oracle/Sybase 或 其 他 数据 库 ) 和 何 种 工具 ( Dreamweaver/ 
Frontpage/ 记 事 本 /EditPlus/AceHTML 或 其 他 ) 来 开发 动态 网 站 ， 并 搭建 相应 程序 的 开发 环 
境 。 如 要 进行 ASP 动态 网 页 开发 , 应 先 安装 IIS 并 配置 IIS, 再 安装 数据 库 软件 ( 如 Access ) 
并 创建 数据 库 及 表 ， 然 后 在 Dreamweaver 中 创建 站 点 ( 本 地 站 点 及 测试 站 点 )， 开 始 动 态 
网 页 的 制作 。 

在 动态 网 页 制作 过 程 中 ， 一 般 先 制作 静态 页 面 ， 再 创建 动态 内 容 ， 即 创建 数据 库 、 请 
求 变量 、 服 务 器 变量 、 表 单 变量 或 预存 过 程 等 内 容 ， 然 后 将 这 些 源 内 容 添 加 到 页 面 中 ， 
后 对 整个 页 面 进行 测试 。 测 试 通 过 即 可 完成 该 动态 页 面 的 制作 ; 如 果 未 通过 ， 则 进行 检 
修改 ， 直 至 通过 为 止 。 
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14.5.2 “IS 的 配置 


在 制作 ASP 动态 网 页 之 前 ， 需 要 安装 IIS 并 对 其 进行 配置 ， 以 便 其 对 指定 的 站 点 进行 
解析 和 管理 。 
- 


国 加 EE》> 新 建 并 配置 网 站 @4 
下 面 将 在 IIS 中 创建 一 个 名 为 “login” 的 站 点 ， 并 将 该 站 点 在 电脑 中 的 物理 位 置 设 置 
为 “D:login "。 
国 打 下 “控制 面板 ”窗口 ， 在 控制 面板 选项 列表 中 单 击 “ 管 理工 具 ” 超 级 链接 ， 如 
图 14-24 所 示 。 


国 在 打开 的 “管理 工具 ”窗口 中 双击 “Internet 信息 服务 (1IS ) 管理 器 ”选项 ， 如 图 
14-25 所 示 。 
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> Internet 信息 服务 (LS) 管理 器 修改 昌 项 : 2013/5/25 16:15 
pr eo EE 3 
14-24 单 击 “管理 工具 ”超级 链接 14-25 “管理 工具 ”窗口 


国 在 打开 的 “Internet 信 息 服 务 (IIS) 管理 器 ” 窗口 中 ， 展 开 左 侧 的 目录 ， 在 “网 站 ” 
选项 上 单 击 鼠标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “添加 网 站 ”命令 , 如 图 14-26 所 示 。 

国 在 打开 的 “添加 网 站 ”对 话 框 的 “网 站 名 称 ” 文 本 框 中 输入 站 点 的 名 称 “login”， 在 
“物理 路 径 ” 文 本 框 中 输入 站 点 的 位 置 “D:\login”， 如 图 14-27 所 示 。 
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Internet 信息 服务 (IIS ) 管理 器 中 已 经 有 一 个 默认 网 站 ， 用 户 也 可 以 不 用 新 建 网 站 ， 在 原 有 的 
网 站 上 做 一 些 修改 即 可 。 
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图 14-26 “Internet 信息 服务 (IIS) 管理 器 ”窗口 


国 单 二 EE 按钮 完成 网 站 的 创建 ， 如 图 14-28 所 示 。 在 “Internet 信息 服务 (1IS ) 管 
理 器 ”窗口 中 可 对 网 站 的 其 他 属性 进行 配置 ， 并 可 对 其 进行 管理 。 


GO [em oon, 


图 14-27 输入 站 点 名 称 和 站 点 位 置 14-28 ”完成 网 站 的 新 建 


14.5.3 ”动态 站 点 的 创建 及 配置 


在 制作 动态 数据 库 页 面 之 前 ， 需 要 先 创建 动态 数据 库 站 点 并 进行 站 点 配置 ， 指 定 本 地 
站 点 、 测 试 站 点 。 
SEE 创建 和 配置 动态 站 点 @。 
国 启 动 Dreamweaver cs6， 选 择 【 站 点 】 了 /新 建站 点 】 了 命令， 在 打开 的 对 话 框 中 输入 


站 点 名 称 ， 并 设置 本 地 站 点 文件 夹 为 “D:\login”"， 然后 选择 “服务 器 ”选项 卡 ， 在 打 
开 的 窗 格 中 单 击 嘲 按钮 ， 如 图 14-29 所 示 。 


即使 是 创建 动态 站 点 ， 在 “站 点 设置 对 象 ” 对 话 框 的 初始 界面 同样 需要 设置 站 点 名 称 和 站 点 文 
件 卖 。 
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国 在 打开 对 话 框 的 “服务 器 名 称 ” 文 本 框 中 输入 “login”， 在 “连接 方法 ”下 拉 列 表 框 
中 选择 “WebDAV” 选 项 ,在 “URL” 和 “Web URL” 文 本 框 中 均 输入 “http://127.0.0.1/”， 
如 图 14-30 所 示 。 


你 笠 在 业 位 置 反 肝 牙 web 上 多 页面 多 节 务 器 。 此 对 笑 杠 的 加 未 自 
1nternet 服务 担 供 育 (ISP) 或 web 管理 全 
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图 14-29 添加 服务 器 图 14-30 设置 服务 器 基本 属性 
俩 单 击 ERE 护 钮 ， 在 打开 窗 格 的 “测试 服务 器 ” 栏 的 “服务 器 模型 ”下 拉 列 表 框 中 
选择 “ASP JavaScript” 选 项 ， 如 图 14-31 所 示 。 
国 单 十 国 按钮 返回 站 点 设置 对 话 框 ， 其 中 显示 了 新 添加 的 服务 器 ， 如 图 14-32 所 
示 ， 单 击 [ES 按钮 完成 操作 。 
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“远程 服务 器 Internet 服务 提供 商 (15P) 或 Web 管理 员 。 
回 维护 同步 信息 
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| 服务 器 模型: PJovasopt | | 
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图 14-31 选择 服务 器 模型 图 14-32 完成 服务 器 添加 


14.5.4 数据 源 的 创建 


在 创建 动态 网 页 前 ， 若 要 实现 对 数据 库 的 操作 ， 必 须 先 建立 与 数据 库 的 连接 。 建 立 连 
接 的 方式 主要 有 两 种 ， 一 种 是 通过 设置 数据 源 来 建立 连接 ， 这 种 方式 比较 简单 、 方 便 ; 另 
一 种 是 直接 以 带 参数 的 字符 串 方式 连接 到 数据 库 , 这 种 方式 相对 复杂 。 下 面 分 别 进行 讲解 。 


本 


将 “服务 器 文件 夹 ” 最 好 设 为 与 IIS 服务 器 中 当前 站 点 中 的 路 径 一 致 ， 最 后 将 Web URL 设 为 
“http://127.0.0.1” (表示 本 机 地 址 )， 即 可 实现 在 Dreamweaver CS6 中 对 ASP 动态 网 页 的 即时 测试 
并 预览 。 
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1. 通过 数据 源 连接 

采用 数据 源 ( DSN ) 进行 连接 需要 在 Web 服务 器 上 创建 数据 源 ， 可 通过 管理 工具 中 的 
ODBC 数据 源 管理 器 来 进行 操作 。 

有 RE 设置 数据 源 连接 @。 


国 在 “控制 面板 ”窗口 中 单 击 “ 管 理工 具 ” 超 级 链接 ， 在 打开 的 “管理 工具 ”窗口 中 双 
击 “ 数 据 源 (ODBC )” 选 项 ， 如 图 14-33 所 示 。 

国 打 开 “ODBC 数据 源 管理 器 ”对 话 框 ， 选 择 “系统 DSN” 选 项 卡 ， 单 击 EBaGa 按 钮 ， 
如 图 14-34 所 示 。 


a 
ES Ea) [8w ] 
图 14-33 打开 数据 源 工具 图 14-34 数据 源 管理 器 


俩 在 打开 的 “创建 新 数据 源 ” 对 话 框 中 选择 驱动 程序 ， 这 里 选择 “Driver do Microsoft 
Access (*.mdb )” 选 项 ， 如 图 14-35 所 示 。 

俩 单 击 EEEEa 按 钮 ， 在 打开 对 话 框 的 “数据 源 名 ”文本 框 中 输入 “dw6”， 单 击 [EBD 
按钮 ， 如 图 14-36 所 示 。 
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14-35 选择 驱动 程序 图 14-36 设置 数据 源 名 
辆 打开 “选择 数据 库 ” 对 话 框 ， 通 过 “驱动 器 ”下 拉 列 表 框 和 “目录 ”列表 框 选择 数据 
库 文件 所 在 路 径 ， 在 左 侧 选择 “db1.mdb” 选 项 ， 单 击 蕊 栈 汪 按钮 ， 在 返回 的 对 话 框 


0 -用 wd 国 … 


连接 成 功 后 , 才能 在 Dreamweaver 中 通过 数据 源 名 称 的 方式 选择 和 使 用 该 连接 来 达到 网 页 与 数 
据 库 的 连接 。 


5 


|| | esp ce mts as of 多 


DMogin\dbl.ndb 


孝 据 库 


EE 


图 14-37 选择 数据 库 并 完成 连接 


国 新 建 一 个 ASP VBScript 类 型 的 网 页 ， 选择 【窗口 /1【 数 据 库 〗 命 令 ， 打开“ 数据 库 ” 
面板 ， 单 击 匡 按 钮 ， 在 弹出 的 下 拉 菜 单 中 选择 “数据 源 名 称 ” 命 令 ， 在 打开 的 对 话 框 
中 选择 之 前 创建 的 “dw6” 连 接 ， 单 击 ER 按钮 ， 如 图 14-38 所 示 。 


Dreamweaver 应 连接 ”使 用 则 试 骤 务 器 上 的 DSN 
网 使用 本 地 DSN 


4 单 击 上 面 的 + 技 要 人 建 
图 14-38 连接 数据 源 名 称 
国 如 果 连 接 成 功 ， 将 打开 如 图 14-39 所 示 的 对 话 框 ， 单 击 EEEEg 按 钮 ， 返 回 “数据 源 名 
称 ” 对 话 框 。 
俩 单 击 EEEE 汪 按钮 ， 完 成 创建 的 数据 库 连接 就 出 现在 “数据 库 ” 面 板 中 ， 如 图 14-40 
所 示 。 


数 舌 遍 禾 DSN) 


连接 名 种: "| 日 


用 户 名 : 

密码 - 
Draamweaver 应 连接 站 
加 


图 14-39 连接 成 功 图 14-40 连接 到 的 数据 库 
2. 通过 字符 串 连接 


在 Dreamweaver 中 可 以 直接 使 用 字符 串 连 接 数 据 库 ， 其 方法 是 : 新 建 ASP VBScript 
动态 网 页 后 ， 在 “数据 库 ” 面 板 中 单 击 画 按钮 ， 在 弹出 的 下 拉 莱 单 中 选择 “ 自 定义 连接 字 


本 


连接 字符 串 的 设置 非常 重要 , 尤其 是 连接 字符 串 中 数据 库 文 件 的 路 径 的 输入 , 如 果 路 径 不 正确 ， 
则 无 法 正确 创建 连接 。 
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‘0 


符 串 ”命令 


连接 名 称 : cn 


这 拉 字 从 串 : hq- hreroer nappath( databare/dbl. mab”) 
Dreamwearer 应 连 周 〇 使 用 贡 坟 8 务 器 上 Ez 程序 
加 使 用 此 计算 机 上 BE 动 程序 


14-41 通过 字符 串 连接 数据 库 

不 同 的 数据 库 其 连接 字符 串 不 同 ，Access 数据 库 的 连接 字符 串 的 格式 为 :“Driver= 
{Microsoft Access Driver (*.mdb)};UID= 用 户 名 ; PWD= 用户 密码 ;DBQ= 数 据 库 路 径 "， 其 
中 数据 库 路 径 常 使 用 相对 于 网 站 根 目 录 的 虚拟 路 径 ， 故 可 写 为 “"Driver={Microsoft Access 
Driver (*.mdb)};UID= 用 户 名 ; PWD= 用 户 密码 ;DBQ="& server.mappath(" 数 据 库 路 径 ")”， 
如 “"Driver={Microsoft Access Driver (*.mdb)}:;UID=test; PWD= test888;:DBQ="& server. 
mappath("database/login.asa")” 就 是 一 个 合法 的 Access 连接 字符 串 。 另 外 ， 如 果 Access 数 
据 库 没有 密码 ， 则 可 以 省 略 UID 和 PWD， 其 写法 为 :“"Driver={Microsoft Access Driver 
(*.mdb)}:;:DBQ="& server.mappath("database/login.asa")"o 

连接 SQL Server 数据 库 的 连接 字符 串 的 格式 为 :“Provider=SQLOLEDB;Server=SQL 
SERVER 服务 器 名 称 ;Database= 数 据 库 名 称 ;UID= 用 户 名 ;PWD= 密 码 "。 如 “Provider= 
SQLOLEDB;Server=gg;Database=login;UID=sa;PWD=admin888” 就 是 一 个 合法 的 SQL Server 
数据 库 连接 字符 串 。 


14.6 ”制作 数据 库 动态 网 


做 好 以 上 工作 后 ， 接 下 来 即 可 进行 动态 网 页 的 制作 ， 在 制作 前 可 以 先进 行 
静态 页 面 的 制作 ， 然 后 再 制作 动态 部 分 。 在 制作 动态 部 分 时 ， 首 先 应 创建 
记录 集 。 


14.6.1 创建 记录 集 


通过 创建 记录 集 可 以 获得 合适 的 数据 库 查 询 结果 ， 要 显示 数据 库 中 的 任何 内 容 ， 都 必 
须 先 创建 记录 集 。 记 录 集 本 身 是 从 指定 数据 库 中 检索 到 的 数据 集合 ， 该 集合 可 包括 完整 的 
数据 库 表 ， 也 可 以 包括 表 的 行 和 列 的 子 集 ， 这 些 行 和 列 通过 在 记录 集中 定义 的 数据 库 查 询 
进行 检索 。 

攻 巴 EB》> 创 建 记录 集 @ 

下 面 在 “ 绑 定 ”面板 中 为 网 页 创建 记录 集 。 


俩 选择 “应 用 程序 ”面板 组 中 的 “ 绑 定 ”选项 卡 ， 单 击 国 按钮 ， 在 弹出 的 下 拉 菜 单 中 先 
择 “ 记 录 集 (查询 )” 命 令 ， 如 图 14-42 所 示 。 


和 .用 wd 国 … 


创建 记录 集 就 是 使 用 SQL 语言 中 的 Select 语句 对 数据 库 中 的 数据 进行 查询 ,不 同 的 Select 语 句 
可 以 获得 不 同 的 查询 结果 ， 如 “Select* from user” 与 “Select username from user” 所 返回 的 查询 结 
果 是 不 同 的 。 


WN | 


ep 
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国 在 打开 的 “记录 集 ” 对 话 框 的 “名 称 ” 文 本 框 中 输入 记录 集 的 名 称 “cn”， 在 “连接 ” 
下 拉 列 表 框 中 选择 一 个 数据 库 连 接 选项 。 在 “表格 ”下 拉 列 表 框 中 选择 要 对 其 进行 查 
询 的 表 ， 在 “ 列 ” 栏 中 设置 查询 结果 中 包含 的 字段 名 称 ， 这 里 选中 加 45 单 选 按钮 。 

国 在 “筛选 ” 栏 中 可 以 设置 查询 的 条 件 ， 在 “排序 ” 栏 第 一 个 下 拉 列 表 框 中 可 选择 要 排 
序 的 字段 , 在 第 二 个 下 拉 列 表 框 中 可 选择 按 升序 或 降序 进行 排序 ,完成 设置 后 的 对 话 
框 如 图 14-43 所 示 。 


图 14-42 创建 记录 集 图 14-43 设置 记录 集 参 数 
国 单 二 按钮， 在 打开 的 “测试 SQL 指令 ”对 话 框 中 即 可 看 到 查询 的 结果 ， 如 
图 14-44 所 示 。 
贺 单 击 EEE 汪 按钮 关闭 “测试 SQL 指令 ”对 话 框 ， 再 单 击 EEBEE 按 钮 关闭 “记录 集 ” 
对 话 框 完成 记录 集 的 创建 , 在 “ 绑 定 ” 选项 卡 界面 即 可 查看 创建 的 记录 集 , 如 图 14-45 


所 示 。 
记录 VserID VU Ws Ws Vse... Ws Joi.,. Las... Vse. 
1 admi 469. a 0 0 200. 200. 10 管理 
2 2 test 06... ef. 0 1 了 200... 200... 4 新 
辕 记录 集 (en) 
F VserID 
多 UserNane 
多 UserPassword 
多 UserEmail 
多 UserPost 
人 多。 UserSex 
一 多 UserFace 
一 多 JoinDatei 
可 一 多 ”LastLogin - 
li ' 
CRste |] (Fst [证 ga [| 
图 14-44 “测试 SQL 指令 ”对 话 框 14-45 ”创建 的 记录 集 


机 


高 级 记录 集 是 查询 条 件 更 复杂 的 记录 集 ， 它 可 以 创建 多 个 条 件 进行 查询 ， 如 可 以 查询 姓名 中 包 
含 “t” 字符 ， 性 别 为 “ 男 ” 的 所 有 人 员 的 信息 。 在 “记录 集 ” 对 话 框 中 ， 单 击 [本 按钮 ， 即 可 在 
打开 的 对 话 框 中 进行 高 级 记录 集 的 创建 。 
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14.6.2 ”制作 动态 页 


创建 好 记录 集 后 就 可 以 开始 制作 动态 页 面 了 ， 使 用 Dreamweaver 的 “数据 ”插入 面板 

中 的 工具 ， 可 以 几乎 不 用 手动 编程 就 可 以 制作 出 功能 强大 的 动态 页 面 。 

在 “插入 ”面板 的 下 拉 列 表 框 中 选择 “数据 ” 

选项 ， 可 在 打开 的 面板 中 使 用 其 中 的 工具 制作 动 

态 页 面 ， 如 图 14-46 所 示 。 其 中 部 分 工具 的 功能 

如 下 。 

“记录 集 ” 工 具 : 用 于 创建 一 个 记录 集 。 
“命令 ”工具 : 用 于 打开 “命令 ”对 话 框 ， 
在 记录 集中 可 以 创建 在 数据 库 中 插入 数 
据 、 更 新 数据 和 删除 数据 的 命令 。 

“动态 数据 ”工具 : 用 于 在 页 面 中 插入 显 
示 动 态 数据 的 对 象 ， 包 括 动态 表格 、 动 态 
文本 、 动 态 文 本 字段 、 动 态 复 选 框 、 动 态 单 选 按钮 组 和 动态 选择 列表 6 个 工具 。 
“重复 区 域 ”工具 : 创建 一 个 重复 区 域 ， 以 显示 记录 集中 的 多 条 记录 或 全 部 记录 。 
“显示 区 域 ” 工 具 : 插入 一 个 根据 某 个 条 件 来 确定 是 否 显示 的 区 域 。 
“记录 集 分 页 ”工具 : 用 于 对 分 页 显示 的 记录 集 进 行 导航 ， 包 括 “ 记 录 集 导航 条 ”、 
“ 移 至 第 一 条 记录 集 ”"、“ 移 至 前 一 条 记录 集 *"、“ 移 至 下 一 条 记录 ”、“ 移 至 最 后 一 条 

记录 ”和 “ 移 至 特定 记录 ”6 个 工具 。 

“ 转 到 详细 (相关 ) 页面” 工具 : 用 于 创建 调整 到 详细 页 面 或 相关 页 面 的 超级 链接 ， 
包括 “ 转 到 详细 页 面 ” 和 “ 转 到 相关 页 面 ”两 个 工具 。 

“记录 集 导 航 状 态 ” 工 具 : 创建 一 个 显示 当前 的 记录 数 和 总 记录 数 的 状态 栏 。 

“ 主 详细 页 集 ” 工 具 : 用 于 创建 主页 面 和 详细 页 面 集 。 

“插入 记录 ”工具 : 用 于 在 数据 库 中 插入 数据 ， 包 括 “ 插 入 记录 表单 向 导 ” 和 “ 插 

入 记录 ”两 个 工具 。 

“更 新 记录 ”工具 : 用 于 对 数据 库 中 的 数据 进行 更 新 ， 包 括 “ 更 新 记录 表单 向 导 ” 

和 “更 新 记录 ”两 个 工具 。 

“删除 记录 ”工具 : 用 于 删除 数据 库 中 的 记录 。 

“用 户 身 份 验证 ”工具 : 用 于 对 用 户 的 身份 进行 验证 ， 包 括 “ 用 户 登 录 ”、“ 注 销 用 

户 ”、“ 限 制 对 页 的 访问 ”和 “检测 新 用 户 名 ”4 个 工具 。 


1. 创建 动态 表格 


表格 是 显示 表格 式 数据 最 常用 的 方法 ， 动 态 表 格 从 数据 库 中 获取 数据 并 动态 地 显示 在 
表格 的 单元 格 中 。 
创建 动态 表格 的 方法 是 : 单 击 “ 数 据 ” 插 入 栏 中 “动态 数据 ”工具 后 的 下 拉 按 钮 ， 在 


人 -用 wd 国 … 


在 “服务 器 行为 ”面板 中 也 可 以 进行 动态 页 的 制作 ， 按 “Ctrl+F9” 快 捷 键 可 以 打开 “服务 器 行 
为 ”面板 ， 单 击 团 按 钮 ， 在 弹出 的 菜单 中 选择 相应 的 命令 即 可 。 


图 14-46 “数据 ”插入 面板 
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弹出 的 下 拉 菜 单 中 选择 “动态 表格 ”命令 ,打开 “动态 表格 ”对 话 框 。 在 “记录 集 ” 下 拉 
列表 框 中 选择 一 个 记录 集 , 然后 在 下 方 进行 具体 设置 , 如 图 14-47 所 示 , 完成 后 单 击 匡 吏 到 ] 
按钮 ， 即 可 在 页 面 中 插入 一 个 动态 表格 ， 如 图 14-48 所 示 。 


画 bNogmunauec-zasp nm -Dx 
= 了 


ID UserName UserpPassword UserEmai UserPost IUser: 
{en UserID} {cn UserName) {cn UserPassword} |{cna UserEmal} {cn Userpost} |{caU 


ao [or -| Sie LR/L 和 YD Wiel Om 


图 14-47 “动态 表格 ”对 话 框 图 14-48 ”插入 的 动态 表格 
2. 创建 动态 文本 


使 用 动态 表格 虽然 非常 方便 ， 但 会 将 记录 集中 每 个 字段 的 数据 都 显示 出 来 ， 而 在 某 些 
时 候 只 需要 显示 部 分 内 容 ， 这 时 就 需要 使 用 动态 文本 工具 手动 添加 每 一 个 需要 的 字段 。 

在 页 面 中 根据 需要 显示 的 字段 数 创建 表格 ， 将 鼠标 光标 定位 到 需要 显示 文本 的 单元 格 
中 ， 单 击 “ 数 据 ” 插 入 栏 中 的 “动态 数据 ”工具 后 的 下 拉 按 钮 ， 在 弹出 的 下 拉 菜 单 中 选择 
“动态 文本 ”命令 ， 打 开 “ 动 态 文本 ”对 话 框 。 在 “ 域 ”列表 框 中 选择 需要 显示 的 字段 ， 
在 “格式 ”下 拉 列 表 框 中 选择 要 使 用 的 格式 ， 如 图 14-49 所 示 ， 单 击 已 栈 刁 按钮 ， 动 态 文 
本 即 添加 到 鼠标 光标 位 置 ， 如 图 14-50 所 示 。 


ES 


姓名 电邮 性 别 
RD = Trin (Gn Fislds, Tt (Uaerke | ea 
图 14-49 “动态 文本 ”对 话 框 14-50 插入 的 动态 文本 
添加 动态 文本 后 , 在 Dreamweaver CS6 中 的 显示 效果 和 在 浏览 器 中 的 预览 效果 如 图 14-51 


所 示 。 


3 注册 时 间 二 ”上 次 车 如 时 间 - 牌 杂 次 小 


人 性别 
Efrswen Userlane} { {rswen UserEnail} | [rs wen UserSex)} § {rs wen JoinDatei} | {rs wen LastLogin} | Irs wen UserLogins} 


姓名 电 地 性 别 注册 时 间 上 次 登录 时 间 登录 次 数 
adnin evay@163. com 0 2003-12-30 16:34:32 | 2007-3-8 21:58:14 10 


14-51 设计 效果 和 预览 效果 


也 可 以 在 “ 绑 定 ”选项 卡 界面 中 将 记录 集中 相应 的 字段 直接 拖 动 到 相应 的 单元 格 中 ， 然 后 再 设 
置 动 态 文本 的 格式 。 


286 


-oO 


3. 创建 重复 区 域 


使 用 动态 文本 只 能 显示 一 条 记录 的 数据 ， 通 常 在 一 个 页 面 中 都 需要 显示 多 条 记录 ， 使 
用 重复 区 域 就 可 以 达到 同一 页 面 中 显示 多 条 记 
录 的 目的 。 

将 鼠标 光标 定位 到 添加 了 动态 文本 的 单元 
格 中 ， 单 击 “ 数 据 ” 插 入 栏 中 的 “重复 区 域 ” 
J 开 “ 重 复 区 域 ”对 话 框 ， 进 行 设置 后 
三 本 按钮 ， 如 图 14-52 所 示 。 
创建 重复 区 域 后 ， 在 编辑 窗口 选中 行 的 左 图 14-52 “重复 区 域 ”对 话 框 
上 角 将 出 现 “ 重 复 ” 字 样 的 文本 ， 保 存 网 页 文 
档 并 在 浏览 器 中 预览 ， 将 显示 多 项 记录 ， 如 图 14-53 所 示 。 


{rs wen. UserHane} {rs wen. UserEmail} i i i {rs wen. UserLogins} 


姓名 电邮 性 别 注册 时 间 上 次 登录 时 间 营 录 次 数 
adnin eway@163. com 0 2003-12-30 16:34:32 | 2007-3-8 21:56:14 10 
test e163. com 1 2005-6-8 20:43:11 | 2005-6-8 21:15:42 4 


图 14-53 ”重复 区 域 设计 和 预览 效果 


4. 插入 记录 集 导航 状态 


在 对 记录 集 进 行 分 页 显示 时 ， 还 需要 制作 记录 集 导航 条 ， 以 方便 用 户 查看 其 他 页 的 记 
录 ， 如 图 14-54 所 示 。 


姓名 电邮 性 别 注册 时 间 上 次 登录 时 间 登录 次 数 
adnin ay@163. com 0 2003-12-30 16:34:32 | 2007-3-8 21:56:14 10 
-页 。 最 后 一 页 记录 1 到 1 培 共 2 


图 14-54 ”记录 集 导 航 状态 效果 

将 鼠标 光标 定位 到 添加 记录 集 导航 状态 的 单元 格 中 ， 单 击 “ 数 据 ” 插 入 栏 中 的 “记录 

集 导 航 状态 ”工具 ， 在 打开 的 “记录 集 导 航 状态 ”对 话 框 中 选择 记录 集 并 单 击 匡 右 按 钮 
即 可 插入 ， 如 图 14-55 所 示 。 


范例: 记录 1 到 5 总 共 10 个 记录 ) - i a i 


SE frst 到 ese Lestl OK frs men totall 


0 -用 wd 国 … 


在 动态 页 面 中 经 常会 显示 当前 的 记录 数 和 总 的 记录 数 等 信息 ， 使 用 记录 集 导航 状态 可 以 很 方便 
地 在 页 面 中 显示 这 些 信 息 。 


襄 训 汉人 让 
DD 
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5. 创建 转 到 详细 页 面 超级 链接 


在 制作 动态 页 面 时 , 通常 会 创建 一 个 显示 简略 信息 的 记录 列表 , 并 为 其 创建 超级 链接 ， 
当 用 户 单 击 这 些 超 级 链接 时 ， 就 可 以 打开 另 一 个 页 面 显示 更 详细 的 信息 ， 这 个 页 面 就 是 详 
细 页 面 ， 使 用 “ 转 到 详细 页 面 ”工具 即 可 实现 该 功能 。 
动态 网 站 中 并 不 是 每 条 记录 都 需要 对 应 一 个 详细 页 面 的 物理 文档， 所 有 记录 其 实 是 共 
享 同一 个 详细 页 面 文档 ， 通 过 传递 参数 的 方式 ， 来 实现 不 同 记录 内 容 的 读 取 和 返回 ， 也 就 
是 说 只 需要 建立 一 个 公用 的 详细 页 面 程序 文档 就 可 以 实现 所 有 同类 记录 的 详细 内 容 展示 。 
插入 “ 转 到 详细 页 面 ”链接 的 操作 方法 是 ， 在 文档 窗口 中 选择 用 于 设置 跳 转 链接 的 目 
标记 录 项 ， 然 后 单 击 “数据 ”插入 面板 的 “ 转 到 详细 页 面 ”工具 ， 打 开 相 应 对 话 框 进行 设 
置 即 可 ， 如 图 14-56 所 示 。 


[TREE TCR 
信息 页: 
作 递 URLS 数 -Tec 设置 为 UT 人 | 


bd Ce 


en 加 
传递 现 有 半数 : 局 | URL 参政 
日 来 单 儿 妆 


图 14-56 “ 转 到 详细 页 面 ”对 话 框 
6. 插入 记录 


经 常 需要 收集 用 户 信息 并 保存 到 数据 库 中 ， 如 将 新 注册 用 户 的 信息 保存 到 数据 库 中 ， 
此 时 可 以 使 用 “插入 记录 ”功能 来 实现 。 

单 击 “ 数 据 ” 插 入 栏 中 的 “插入 记录 ”工具 右 侧 的 下 拉 按 钮 ， 在 弹出 的 下 拉 菜 单 中 选 
择 “ 插 入 记录 表单 向 导 ” 命 令 ， 在 打开 的 “插入 记录 表单 ”对 话 框 中 可 执行 插入 记录 的 操 
作 ， 如 图 14-57 所 示 , 插入 后 将 在 页 面 中 添加 一 个 表单 以 接受 用 户 提交 的 数据 ， 如 图 14-58 
所 示 。 


图 14-57 “插入 记录 表单 ”对 话 框 14-58 ”插入 的 记录 表单 


插入 记录 表单 后 ， 用 户 还 可 以 选择 表单 中 的 按钮 原件 ， 在 “属性 ”面板 中 修改 其 值 ， 如 注册 页 
面 可 修改 按钮 的 值 为 “注册 ”。 


-oO 


、 wear | 


Se ep aC) 


7. 更 新 记录 


使 用 更 新 记录 表单 向 导 , 可 以 修改 数据 库 中 某 条 记录 的 数据 ( 如 修改 用 户 密码 ), 使 用 
该 工具 常 结合 “ 转 到 详细 页 ”工具 一 起 制作 。 单 击 “ 数 据 ” 插 入 栏 中 “更 新 记录 ”工具 右 
侧 的 下 拉 按 钮 ， 在 弹出 的 下 拉 菜 单 中 选择 “更 新 记录 表单 向 导 ” 命 令 ， 打 开 “ 更 新 记录 表 
单 ” 对 话 框 ， 在 其 中 进行 选择 和 设置 即 可 。 


8. 删除 记录 


如 果 要 删除 数据 库 中 的 某 条 记录 ， 可 以 使 用 “删除 记录 ”工具 。 在 表格 的 相关 单元 格 
中 插入 一 个 表单 ， 并 添加 一 个 提交 按钮 ， 可 将 其 值 改 为 “删除 "， 如 图 14-59 所 示 ， 然 后 单 
击 “ 数 据 ” 插 入 栏 中 的 “删除 记录 ”工具 ， 打 开 “ 删 除 记录 ”对 话 框 ， 即 可 对 删除 操作 进 
行 详细 设置 。 


{rs_wen. UserBnail} | {rs_wen UserSex} {rs_wen JoinDatei} | {rs_wen LastLogin} ; {rs_wen UserLogins} | 删除】 : 


图 14-59 添加 表单 按钮 


14.7 ”精通 实例 一 一 制作 员工 名 单 页 面 


本 章 的 精通 实例 将 在 员工 名 单 页 面 中 创建 和 连接 数据 库 ， 并 添加 各 种 动态 
页 面 元 素 ， 使 页 面 中 的 内 容 以 数据 库 为 支持 ， 制 作 的 动态 页 面 效果 如 
图 14-60 所 示 。 


公司 员工 一 览 表 


数据 库 表 格 与 一 般 的 电子 表格 虽然 都 有 存储 和 查询 数据 的 功能 ， 但 是 电子 表格 主要 是 对 数据 的 
分 析 ， 而 不 能 在 网 页 和 其 他 应 用 程序 中 被 调用 ， 这 也 正 是 数据 库 的 最 大 特点 。 
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14.7.1 行业 分 析 


ee 页 作为 一 种 可 以 承载 大 量 信息 的 网 页 技术 ， 为 网 页 设计 者 和 维护 者 提供 了 极 大 
的 方便 ， 不 管 是 哪 方面 的 网 站 ， 只 要 牵涉 到 信息 的 更 新 、 用 户 注册 、 资 料 数据 的 管理 和 为 
a 

本 例 制 作 的 员工 名 单 页 面 ， 首 先 要 实现 在 页 面 中 显示 数据 库 中 的 相关 信息 ， 然 后 在 页 
面 中 添加 插入 和 删除 信息 的 功能 ， 达 到 通过 网 页 管理 数据 库 的 目的 ， 这 也 是 很 多 网 页 设计 
在 为 客户 管理 提供 方便 而 经 常 使 用 的 技术 。 要 实现 这 些 功能 ,在 配置 好 Web 服务 器 和 站 点 
信息 后 ， 需 要 创建 一 个 数据 库 ， 并 在 数据 库 中 添加 一 个 或 多 个 表 ， 表 中 的 字段 需要 与 网 页 
中 需要 显示 的 内 容 相符 ， 设 计 好 表 后 在 其 中 输入 内 容 ， 然 后 进行 数据 库 连 接 以 及 记录 和 集 的 
创建 等 操作 ， 最 终 达 到 预期 效果 。 这 也 是 一 个 简单 的 动态 网 页 所 需要 做 的 一 些 基本 操作 。 


14.7.2 ”操作 思路 
为 更 快 完成 本 例 的 制作 ， 并 尽 可 能 运用 本 章 讲解 的 知识 ， 本 例 的 操作 思路 如 下 。 


14.7.3 ”操作 步骤 


下 面 介绍 实现 动态 数据 管理 的 方法 。 其 操作 步骤 如 下 : 


光盘 \ 素 材 \ 第 14 章 \mingdan\mingdan.asp 
人 é: 光盘 \ 效 果 \ 第 14 章 \mingdan\mingdan.asp 


盘 ”光盘 \ 实 例 演示 \ 第 14 章 \ 制 作 员 于 名 音 惧 面 > 


国 启 动 Access 2003, 新 建 一 个 数据 库 , 并 进行 保存 , 在 打开 的 窗口 中 选择 “ 表 ” 选 项 ， 
并 双击 “使 用 设计 器 创建 表 ” 选 项 。 

国 在 打开 的 设计 器 中 添加 ID、 name、sex、age 和 jobs 5 个 字段 ， 并 设置 相应 的 字段 
类 型 ， 如 图 14-61 所 示 。 

国 设 计 和 好 后 对 表 进行 保存 ， 然后 在 数据 库 窗口 中 双击 该 表 ， 在 打开 的 窗口 中 输入 如 
图 14-62 所 示 的 数据 ， 输 入 完成 后 关闭 窗口 即 可 。 


和 


数据 库 中 字段 的 设置 对 于 动态 网 页 的 制作 非常 重要 ， 只 有 创建 了 合适 的 字段 ， 在 网 页 中 才能 调 
用 到 需要 的 数据 。 


1 张 武 男 23 营销 

2 李 想 男 28 客服 

3 陈述 阅 女 24 客服 

< 向 东 男 30 市 场 部 经 理 

5 康 紊 玄 财务 

6 徐 正 阳 男 全 营销 

了 苏 圭 男 29 客服 主管 

8 陈 将 男 总 经 理 

9 田 编 女 29 副 总 经 理 
10 秦 小 巩 女 2 行刑 

输入 

记录 : [JE 10 [PHP 攻 共有 记录 数 : 10 4 


图 14-61 创建 和 设计 表 图 14-62 输入 数据 


俩 打开 “管理 工具 ” 窗口， 双击“ 数据 源 ( ODBC )” 选 项 ， 打 开 “ODBC 数据 源 管理 
器 ”对 话 框 ， 选 择 “ 系 统 DSN” 选 项 卡 ， 单 击 Emma 按钮 ， 如 图 14-63 所 示 。 

国 在 打开 的 “创建 新 数据 源 ” 对 话 框 中 选择 “Driver do Microsoft Access (*.mdb)” 选 
项 ， 单 击 匡 表 辐 按钮， 如 图 14-64 所 示 。 


[A su RR | wi ss1 [aR [| 这 搞 | 关 于 | 
党 下 人间 击 ] Emma 
二 


Driver a 


Joealserver SRL Surver 


C5 


呈 二 于 


[CC 厂 [| Wh El 帮助 


图 14-63 ”添加 系统 DSN 14-64 选择 数据 源 驱 动 程序 


国 在 打开 的 对 话 框 中 输入 数据 源 名 称 “coon”, 单 击 荔 下 按 钮 , 在 打开 的 “选择 数据 库 ” 
对 话 框 中 选择 company.mdb 数据 库 , 然后 依次 单 击 区 右 汪 按钮 返回 “ODBC Microsoft 
Access 安装 ”对 话 框 ， 然 后 单 击 克 按钮 ， 如 图 14-65 所 示 。 

俩 打开 “mingdan.asp” 素 材 网 页 文件 ， 切 换 到 “数据 库 ” 面 板 ， 单 击 国 按钮 ， 在 弹出 
的 下 拉 菜 单 中 选择 “数据 源 名 称 (DNS )” 选 项 ， 在 打开 的 对 话 框 中 选择 “coon” 数 
据 源 名 称 ， 单 击 EEBE 按钮 绑 定数 据 源 ， 如 图 14-66 所 示 。 


#0。 EE] 

m0 全 了 输入 
4 

再 。Ditegiaminela mpm. na 
[起 呈 丰 | [E 和 WW 
Ftd 

各 无 中 

OE 


~ 


Dreamweaver 应 过 按 吕 使 用 到 试 联 秀 吕 上 的 DSN 
郴 便 用 二老 DSN 


[Rn 


图 14-65 选择 数据 库 14-66 ”连接 数据 源 


0 -用 wd 国 … 


通过 直接 “ 自 定义 连接 字符 囊 ” 的 方式 创建 数据 库 连 接 ， 这 种 方式 不 需要 创建 数据 源 ， 操 作 更 
加 简便 ， 但 要 求 设计 者 必须 熟悉 连接 字符 串 的 编写 方法 ， 连 接 字 符 串 通常 由 驱动 类 型 和 数据 源 地 址 
组 成 。 
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切换 到 “ 绑 定 ”面板 ， 单 击 国 按钮 ， 在 弹出 的 下 拉 菜 单 中 选择 “记录 集 (查询 )” 命 
令 ， 打 开 “ 记 录 集 ”对 话 框 。 设 置 “ 连 接 ” 为 “coon”,“ 表 格 ” 为 “employee”,“ 排 
序 ” 为 “ID”、“ 升 序 ”， 如 图 14-67 所 示 ， 测 试 成 功 后 单 击 EEBE 汪 按钮 完成 设置 ， 按 
“Ctrl+S” 快 捷 键 保存 文档 。 

俩 将 民 标 光标 定位 到 网 页 中 表格 的 第 2 行 了 第 1 列 ， 在 “ 绑 定 ”面板 中 选择 “ID” 选 项 ， 
单 击 国 柄 本 按钮 插入 记录 ， 如 图 14-68 所 示 。 


二 一 文档 类 型: MSF Vhseript 。 C 


四 14-67 ”插入 记录 集 图 14-68 插入 记录 


国有 信用 相同 的 方法 人 次 在 夫 第 2 和 了 第 2 列 至 第 5 列 分 别 插入 “name”、“sex”、“age” 
和 “jobs” 记 录 ， 如 图 14-69 所 示 。 


公司 员工 一 鉴 表 


一 "一 ai- 一 


Eve) 。 Peakedama 。 Peakattaa eattealag Beansaipo 图 
| 
图 14-69 插入 所 有 记录 


国 交 + 第 2 行 ， 切换 到 “服务 器 行为 ” 面板, 单 击 国 按钮 , 在 弹出 的 下 拉 菜 单 中 选择 “ 重 
复 区 域 ” 命 令 ， 将 表格 的 整个 第 2 行 设 为 重复 区 域 ， 在 打开 的 “重复 区 域 ”对 话 框 中 
设置 “显示 ”为 “5”( 即 每 页 显示 5 条 记录 )， 如 图 14-70 所 示 。 

例 许 鼠 标 光 标定 位 到 表格 第 3 行 “|” 符 号 左 侧 ， 单 击 “ 服 务 器 行为 ”面板 中 的 国 按 钮 ， 
在 弹出 的 下 拉 菜 单 中 选择 【记录 集 分 页 〗/【 移 至 前 一 条 记录 】 命 令 ， 在 打开 的 对 话 
框 中 单 击 世 BE 汪 按钮 ， 如 图 14-71 所 示 。 


记录 集 [Recordsetl | 移 至 前 一 冬 记 录 "| 
EE 
mx [|[ 本 [设置] me TT 5 本 刁 要 导 


日 所 有 记录 记录 集 - [Recorasetl = 
者 助 


图 14-70 设置 重复 区 域 14-71 设置 记录 集 分 页 


人 


Dreamweaver 访问 数据 库 并 返回 数据 的 操作 流程 ， 主 要 包括 创建 数据 源 连 接 、 创 建 记 录 集 、 选 
择 的 插入 字段 、 选 中 字段 设置 显示 区 域 、 通 过 重复 区 域 和 记录 集 分 页 设置 来 实现 记录 的 分 页 列表 。 


292 


-0 


、 unr [| 


国 左 “|” 符 号 右 侧 定位 鼠标 光标 ， 单 击 “ 服 务 器 行为 ”面板 中 的 国 按 钮 ， 选 择 【记录 
集 分 页 了 了 /【 移 至 下 一 条 记录 】 了 命令 ， 在 打开 的 对 话 框 中 单 击 EEE 梧 按钮， 效果 如 
图 14-72 所 示 。 

国 打 开 “insert.asp” 文档 ， 在 “服务 器 行为 ”面板 中 单 击 国 按 钮 选择 “插入 记录 ” 
命令 ,在 “插入 记录 ”对 话 框 中 设置 “连接 ”为 “coon”,“ 插 入 到 表格 ”为 “employee”。 
国 在 “插入 后 ， 转 到 ”文本 框 中 输入 转 到 的 文件 “mingdan.asp” , 单 击 世 枉 本 按钮 ， 如 

图 14-73 所 示 ， 最 后 保存 文档 完成 制作 。 


ee ree ER 
| 二 
14-72 添加 记录 集 分 页 效果 图 14-73 插入 记录 


14.8 ”精通 练习 


本 章 主要 介绍 了 动态 网 页 的 基础 知识 、 数 据 库 知识 、 开 发 预览 、 开 发 流程 
以 及 数据 库 的 链接 和 动态 网 页 的 制作 方法 等 ， 下 面 通过 两 个 练习 对 动态 网 
页 的 制作 知识 加 以 巩固 。 


14.8.1 创建 Access 数据 库 


本 次 练习 将 在 Access 中 创建 数据 库 ， 并 设计 一 个 数据 表 , 为 制作 动态 网 页 作 准 备 ， 其 
设计 效果 如 图 14-74 所 示 。 


目前 的 Access 数据 库 主要 有 2010、2007 和 2003 版 本 ， 但 在 Dreamweaver 中 ， 最 好 使 用 2003 
格式 ， 以 免 引 起 不 兼容 的 问题 。 


2 一 <- -用 we 国 …。 
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网 光盘 效果 \ 第 14 章 \login.asa 
守 芭 张 瘟 ”光盘 \ 实 例 演示 \ 第 14 章 \ 创 建 Access 数据 库 > 


该 练习 的 操作 思路 如 下 。 


BE 


' 新 建 赤 间 设计 和 字 及 人 


14.8.2 ”制作 注册 页 面 


本 练习 将 为 已 有 注册 表单 的 网 页 “reg.asp” 连 接 “usr.asa” 数 据 库 ， 并 在 页 面 中 添加 
“插入 记录 ”功能 ， 以 帮助 读者 进一步 加 深 对 本 章 知识 的 掌握 。 网 页 “reg.asp” 的 预览 效 
果 如 图 14-75 所 示 。 


i 我 们 也 觉得 注册 、 登 录 麻 烦 透 了 ，*。。，*。， 
奇 奇 快速 注册 
在 青青 注册 只 要 2 步 : 
ee 1 填写 左边 的 内 容 ; 按 完 成 注册 ; 
a@ricom | 2 查收 你 的 emal 点 击 末末 所 发 确认 信 中 的 甸 按 ， 
用 来 确认 你 的 身份 , 育 背 鬼 不 公开 
人 emall 同 台电 脑 登 录 -次 台 行 ,再 厅 能 记性 你 
从 自己 设 一 个 区 
osee | 
有 时 候 你 需要 用 它 舍 录 , 请 使 用 英 
文字 母 、 符 号 或 数字 。 
给 自己 起 一 个 名 号 
半音 
中 、 英 文 均 可 ， 
Ee: E 册 | 


图 14-75 注册 页 面 效果 
光盘 \ 素 材 \ 第 14 章 \reg 
网 光盘 \ 效 果 \ 第 14 章 \reg 
守 % 胡 ”光盘 \ 实 例 演示 \ 第 14 章 \ 制 作 注册 页 面 > 
该 练习 的 操作 思路 如 下 。 


9 而 电 g 国 。 . fe hp 
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创建 好 数据 库 后 ， 可 将 其 后 缓 名 修改 为 .asa， 以 防止 其 他 用 户 打开 数据 库 ， 修 改 其 中 的 信息 。 


他 和 ee 动态 网 页 的 特 沪 5 中 


1 1 1 
! ”所谓 “动态 "， 并 不 是 指 放 在 网 页 上 的 GIF 图 片 ,动态 网 页 技术 有 以 下 几 个 特点 。! 
! ”DD 交互 性 : 即 网 页 会 根据 用 户 的 要 求 和 选择 而 动态 改变 和 响应 ,将 浏览 器 作为 | 
1 客户 端 界面 ， 这 将 是 今后 Web 发 展 的 大 势 所 趋 。 | 
! 3 自动 更 新 ， 即 无 须 手动 地 更 新 HTML 文档 ， 便 会 自动 生成 新 的 页 面 ， 可 以 1 
大 大 节省 工作 量 。 ! 
! DD 因 时 因 人 而 变 ， 即 当 不 同 的 时 间 、 不 同 的 人 访问 同一 网 址 时 会 产生 不 同 的 ， 
1 
1 


: ee p> | 


要 学 好 数据 库 动 态 网 页 的 制作 ,需要 掌握 许多 知识 ， 如 ASP 等 编程 语言 、 数 据 库 知识 等 ,读者 
可 以 参考 相关 书籍 进行 学 习 、 提 高 。 
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为 网 页 未 加 特效 


静态 网 页 并 不 是 说 其 效果 不 美观 、 不 炫目 ， 只 是 针对 
动态 网 页 不 同 的 页 面 显示 方式 而 言 。 其 实 不 管 是 在 动态 网 
， 页 还 是 在 静态 网 页 中 ， 都 可 以 通过 一 些 网 页 特效 代码 ， 使 
页 面 呈现 非常 炫 的 效果 。 要 实现 网 页 特效 ， 通 常 可 借助 于 
JavaScript， 使 用 它 编 写 的 代码 ， 可 以 实现 各 种 各 样 个 性 化 
的 网 页 特效 。 下面 将 对 JavaScript 的 基础 知识 和 部 分 网 页 特 
效 进行 讲解 。 


nn | 


15.1 JavaScript 简介 


19; 


作用 


JavaScript 是 一 种 基于 对 象 、 解 释 型 的 脚本 语言 ， 使 用 它 可 以 开发 Internet 
客户 端的 应 用 程序 。 使 用 JavaScript, 可 以 在 设计 网 页 时 为 网 页 添加 一 些 特 
殊 的 效果 。 


1.1 JavaScript 的 特点 


虽然 JavaScript 与 C++ 等 成 熟 的 面向 对 象 语言 相 比 功能 要 能 一 些 ， 但 对 于 网 页 特效 的 


ds 


成 ， 


， 其 功能 已 经 足够 大 了 。 其 具有 以 下 方面 的 特点 。 
JavaScript 是 一 种 脚本 语言 :脚本 是 一 种 能 够 完成 某 些 特殊 功能 的 小 “程序 ”。 在 
脚本 中 所 使 用 的 命令 与 语句 集 称 为 脚本 语言 。JavaScript 就 是 一 种 脚本 语言 ， 将 
JavaScript 代码 直接 嵌入 到 HTML 网 页 代码 中 ， 浏 览 网 页 时 即 可 执行 相应 的 功能 ， 
如 显示 弹出 信息 、 特 殊 链 接 效 果 等 ,还 可 以 执行 菜 些 输入 检查 ， 如 检查 用 户 是 否 在 
文本 框 中 输入 了 内 容 等 。 
JavaScript 是 基于 对 象 的 语言 : 面向 对 象 程序 设计 ,力图 将 程序 设计 作为 一 些 可 以 
完成 不 同 功 能 的 独立 部 分 ( 即 对 象 ) 的 组 合体 。 相 同类 型 的 对 象 作为 一 类 ( Class) 
被 组 合 在 一 起 。 
JavaScript 是 事件 驱动 的 语言 : 当 用 户 在 浏览 网 页 进行 某 项 操作 时 , 就 产生 了 一 个 
“事件 "。 如 单 击 一 个 链接 ， 拖 动 妃 标 等 都 是 事件 。 当 事件 发 生 时 ，JavaScript 即 可 
对 这 些 事件 作出 响应 。 至 于 作 什么 响应 , 则 由 JavaScript 代码 所 实现 的 功能 来 决定 。 
JavaScript 是 安全 的 语言 : JavaScript 被 设计 为 通过 浏览 器 来 处 理 并 显示 信息 ， 但 
它 不 能 修改 其 他 文件 中 的 内 容 ， 即 它 不 能 将 数据 存储 在 Web 服务 器 或 用 户 的 电脑 
中 ， 更 不 能 对 用 户 文件 进行 修改 或 删除 操作 。 
JavaScript 是 与 平台 无 关 的 语言 :对 于 一 般 的 计算 机 程序 ,它们 的 运行 与 平台 有 关 ， 
这 就 是 许多 软件 有 Windows 版 和 UNIX 版 的 原因 。JavaScript 虽然 有 一 些 限制 ， 但 
并 不 依赖 于 具体 的 计算 机 平台 ， 它 只 与 解释 它 的 浏览 器 有 关 ， 无 论 是 在 Windows 
操作 系统 还 是 UNIX 操作 系统 中 ， 它 都 能 被 执行 。 


1.2 JavaScript 的 函数 


JavaScript 函数 是 一 种 能 完成 一 定 功 能 的 代码 块 , 由 多 条 JavaScript 语句 组 合 在 一 起 构 
它 可 以 在 脚本 中 被 事件 和 其 他 语句 调用 。 定 义 函数 的 格式 如 下 : 


Function functionName(parameter1l,parameter2...){ 


Statements; 


JavaScript 在 动态 网 页 中 使 用 非常 多 ， 如 现在 非常 流行 的 Ajax ( Asynchronous JavaScript and XML， 
异步 JavaScript 和 XML ) 技术 就 是 以 JavaScript 和 XML 为 核心 的 。 
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其 中 ，function 表示 要 创建 一 个 函数 ; functionName 是 函数 的 名 称 ;parameterl 、 
parameter2 是 函数 的 参数 ;statements 是 函数 体 ， 即 多 条 JavaScript 语句 组 成 的 集合 。 如 下 
所 示 为 一 个 函数 的 示例 。 


<script language="“JavaScript”> 


2 

Function Hello() // 定 义 一 个 名 为 “Hello” 的 无 参 函 数 
Document.write(“hello,”); // 表 示 在 浏览 器 窗口 显示 “hello,” 字 符 

} 

Function Message(message) // 定 义 另 一 个 名 为 “Message” 的 有 参数 函数 
{ 

Document.write(message); // 在 浏览 器 窗口 中 显示 message 的 内 容 

} 

//--> 

</script> 


15.1.3 ”在 网 页 中 使 用 JavaScript 


在 网 页 中 使 用 JavaScript 时 ， 通 常 将 JavaScript 函数 放 在 <head> </head> 标 签 之 间 ， 然 
后 在 需要 调用 该 函数 的 位 置 添加 相应 的 代码 进行 调用 即 可 。 

- 

ESDEEB> 使 用 JavaScript 添加 弹出 对 话 框 @。 

下 面 通过 JavaScript 在 网 页 中 实现 单 击 链接 后 打开 一 个 提示 对 话 框 的 效果 。 


多 e: 光盘 \ 效 果 \ 第 15 章 \tishi.html > 


国 在 网 页 中 选中 文本 ， 在 “属性 ”面板 的 “链接 ”下 拉 列 表 框 中 输入 “#” 创 建 空 链接 。 
国 切 换 到 代码 视图 ， 在 </head> 标 签 前 输入 如 图 15-1 所 示 的 JavaScript 函数 。 


http-equiv="Content-Type” content="text/html; charset=gb2312” /> 
e》javascript 基 础 </title> 


unction WpopupNse (nsg) { //v1.0 


alert (msg 


15-1 输入 JavaScript 函数 
国 在 建立 了 空 链接 的 文本 代码 “<a href="#"” 后 输入 调用 JavaScript 函数 的 代码 


一 些 特效 需要 在 动态 网 页 中 才能 实现 ， 或 者 需要 提取 数据 库 中 的 数据 ， 当 缺失 数据 时 将 出 现 错 
误 ， 甚 至 其 他 内 容 页 不 能 正常 显示 。 
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15-2 输入 JavaScript 代码 
国保 存 后 在 浏览 器 中 预览 ， 单 击 链接 文本 时 ,将 打开 一 个 提示 对 话 框 ,如 图 15-3 所 示 。 


图 15-3 单 击 链接 打开 提示 对 话 框 


15.2 ”网 页 特效 制作 


很 多 网 页 特效 通常 都 使 用 JavaScript 来 制作 ， 下 面具 体 讲 解 一 些 常用 网 页 
特效 的 制作 方法 。 


15.2.1 动态 链接 注释 


这 是 一 种 比较 有 意思 的 特效 ， 当 鼠标 指针 移 到 应 用 了 该 特效 的 超级 链接 文本 上 时 ， 将 
在 文本 下 方 以 过 渡 效 果 显 示 提 示 文 本 ， 其 效果 如 图 15-4 所 示 。 


a 动 志 链 捕 记 释 议 


15-4 动态 链接 注释 
实现 该 效果 的 代码 如 下 : 
<html> 
<head> 
<title> 动 态 链 接 注释 </title> 
<STYLE type="text/css"> 
a 


body,div,a{font:menu} 


0 -有 wd 国 … 


制作 本 特效 时 只 需要 将 代码 分 别 放置 在 网 页 的 相应 部 分 即 可 , 如 <head></head> 标 签 中 的 内 容 就 
放 在 新 网 页 的 <head></head> 标 签 中 。 
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.article { 

BORDER-BOTTOM: black lpx solid; BORDER-LEFT: black lpx solid; BORDER- 
RIGHT:black 1px solid; BORDER-TOP: black 1px solid; FILTER: revealTrans (transition= 23, 
duration=0.5) blendTrans(duration=0.5); POSITION: absolute; VISIBILITY: hidden; background- 
color: #FFCC00; padding-top: 3px; padding-right: 3px; padding-bottom: 3px; padding-left: 
3px} 

i 

</STYLE> 

<SCRIPT language=JavaScript1.2> 

4 

function Show(divid) { 

divid.filters.revealTrans.apply(); 

divid.style.visibility = "visible"; 

divid.filters.revealTrans.play(); 

} 

function Hide(divid) { 

divid.filters.revealTrans.apply(); 

divid.style.visibility = "hidden"; 

divid.filters.revealTrans.play(); 

} 

//--> 

</script> 

</head> 

<body> 

<a href="#" on MouseOver=Show(aaa) on MouseOut=Hide(aaa)> 

动态 链接 注释 </a> 

<div id="aaa" class="article"> 动 态 链接 注释 </div> 

</body> 

</html> 

实现 本 特效 的 重点 是 要 定义 样式 “article" 。 其 中 ,“FILTER: revealTrans(transition=23， 
duration=0.5) blendTrans(duration=0.5);” 的 定义 非常 重要 ， 它 就 是 实现 过 渡 效 果 的 CSS 定 
义 ， 而 JavaScript 函数 “Show” 和 “Hide” 则 实现 何 时 应 用 过 渡 效 果 ， 何 时 不 出 现 过 渡 效 
果 的 功能 。 


15.2.2 ”删除 确认 


进行 信息 删除 时 , 为 了 防止 用 户 进行 误 删除 , 常常 会 打开 一 个 提示 对 话 框 , 如 图 15-5 
所 示 , 提醒 用 户 是 否 要 进行 删除 操作 , 如 果 用 户 单 击 臣 可 了 J 按钮 , 则 表明 要 进行 删除 操作 ， 


编写 JavaScript 函数 需要 掌握 许多 知识 ， 如 JavaScript 本 身 的 语法 、CSS、HTML 等 ， 如 果 要 自 
己 编写 ， 还 需要 对 这 些 知识 进行 深入 学 习 。 


加 、 nn | 


转 到 删除 信息 页 面 ， 如 果 是 误 操作 ， 当 用 户 看 到 提示 对 话 框 后 就 会 发 现 是 误 操作 ， 此 时 单 
击 世 琶 -按钮 取消 删除 操作 。 


二 a) 


图 15-5 删除 确认 


实现 该 效果 不 同 于 单一 的 弹出 提示 对 话 框 ， 当 用 户 确认 后 还 将 进行 下 一 步 的 操作 。 其 


代码 如 下 : 
<html> 
<head> 
<title> 删 除 确认 </title> 
</head> 


<body id="all" text="#000000" bgcolor="#0496DC" topmargin="0" leftmargin="0"> 
<script> 
function delconfirm(){ 


question = confirm(" 用 户 确 认 要 删除 本 条 信息 吗 ? ") ”// 实 现 打开 提示 对 话 框 


if (question != "0"){ // 进 行 判断 ， 单 击 “ 取 消 ” 按 钮 返回 “0"” 
window.open("del.asp") /打开 del.asp 网 页 进行 删除 操作 
</script> 


<p align="center"> 
<a href="#" onClick="delconfirm(); return false;"><font color="#FFFFFF"> 单 击 这 里 进 


行 删除 </font></a> 


</p> 
</body> 
</html> 


实现 本 特效 的 关键 是 “confirm” 语 句 的 使 用 ， 它 的 作用 与 “alert” 的 作用 基本 相同 ， 


但 它 在 打开 的 对 话 框 中 比 “alert” 打 开 的 对 话 框 中 多 一 个 下 再 | 按钮。 


15.2.3 全屏 打 开 窗 口 


这 个 特效 实现 的 效果 是 ， 当 单 击 网 页 中 的 按钮 时 ， 将 打开 一 个 全 屏 的 窗口 ， 并 显示 指 


定 的 网 页 “bigwindow.html"。 其 代码 如 下 : 


所 以 在 本 例 中 因为 没有 del.asp 文件 ， 删 除 操 作 将 不 能 继续 。 


CD 
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确认 删除 通常 需要 动态 网 页 的 支持 ， 当 进行 确认 操作 后 ， 对 相关 页 面 中 的 相关 记录 进行 删除 ， 


而 
og 
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<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title> 全 屏 打开 窗 口 </title> 

<script> 


去 | 二 
function winopen(){ 

var targeturl="bigwindow.html" // 设 置 要 打开 的 网 页 
newwin=window.open("",""," 
if (document.all){ 


newwin.moveTo(0,0) 


scrollbars") 


newwin.resizeTo(screen.width,screen.height) 

} 

newwin.location=targeturl 

} 

//--> 

</script> 

</head> 

<body><input type="button" onClick="winopen()" value=" 全 屏 打开 窗口 " name= 
"button"> 

</body> 

</html> 

如 果 将 上 例 中 的 “<body>” 修 改 为 “<body onLoad=“winopen()”>"， 并 将 “<input 
type="button" onClick="winopen()”value=" 全 屏 打开 窗口 " name="button">” 语 句 删除 ， 此 
时 ， 打 开 该 特效 网 页 的 同时 ， 将 自动 打开 另 一 个 全 屏 窗口 。 


15.2.4 日 期 联动 下 拉 列 表 框 


在 制作 表单 过 程 中 常 需要 用 户 选 择 出 生日 期 之 类 的 操作 ， 下 面 的 代码 就 是 实现 日 期 选 
择 的 联动 下 拉 列 表 框 ， 其 效果 如 图 15-6 所 示 。 


1975 ~ 5 1 v 星期 四 


图 15-6 日 期 联动 下 拉 列 表 框 


联动 下 拉 列 表 框 是 指 选 择 第 一 个 下 拉 列 表 框 中 的 内 容 后 ， 其 后 的 下 拉 列 表 框 中 的 内 容 会 自动 作 
相应 的 变化 ， 如 选择 省 份 后 ， 其 后 下 拉 列 表 框 中 就 会 显示 出 该 省 所 有 市 的 名 称 。 
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实现 日 期 联动 下 拉 列 表 框 的 代码 如 下 : 
<form> 
<select id=year onchange=toDate()> 
<script>for(i=1970;i<=2010;i++)document.write("<option>"+i+"</option>") 
</script> 
</select> 
<select id=month onchange=toDate()> 
<script>for(i=1;i<=12;i++)document.write("<option>"+i+"</option>")</script> 
</select> 
<select id=day onchange=toDay()></select> 
<input name=weekday> 
</form> 
<script> 
Var arr=" 日 一 二 三 四 五 六 ".split("") 
function toDate(){ 
with(document.all){ 
VvYear=parseInt(year.options[year.selectedIndex].text) 
vMonth=parseInt(month.options[month.selectedIndex].text) 
day.length=0; 
for(i=0;i<(new 
Date(vYear,vMonth,0)).getDate();i++){day.options[day.length++].value=day.length;day.options 
[day.length-1].text=day.length;} 
} 
toDay(); 
} 
function toDay(O){ 
vDay=parseInt(document.all.day.options[document.all.day.selectedIndex] value) 
document.all("weekday").value=" 星 期 "+arr[new Date(vYear,vMonth-1,vDay).getDay()] 
} 
window.onload=toDate: 


</script> 


15.2.5 ”禁止 使 用 鼠标 右键 


在 浏览 网 页 时 ， 通 常 可 以 在 图 像 上 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “图 像 另 
存 为 ”命令 ， 将 图 像 保 存 到 本 地 电脑 中 ， 但 有 时 为 了 保护 网 页 中 的 图 像 ， 不 想 用户 拥 有 该 
功能 时 ， 则 可 以 通过 JavaScript 来 禁止 右键 菜单 的 弹出 。 


人 .用 wd 国 … 


年 有 平年 和 头 年 之 分 ， 平 年 2 月 份 只 有 28 天 ， 而 头 年 2 月 份 是 29 天 。 每 个 月 有 月 大 (31 天 ) 
和 月 小 (30 天 ) 之 分 ， 某 年 某 月 某 日 是 星期 几 ， 这 些 都 是 可 以 通过 JavaScript 代码 计算 出 来 的 。 
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禁止 使 用 鼠标 右键 的 代码 如 下 : 


<html> 
<head> 
<body> 
<script language="JavaScript"> 
| 
if (window.Event) 
document.captureEvents(Event. MOUSEUP); 
function nocontextmenu() 
{ 
event.cancelBubble = true 
event.returnValue = false; 
return false; 
} 
function norightclick(e) 
{ 
if (window.Event) 
{ 
if (e.which == 2 || e.which == 3) 
return false; 
} 
else 
if (event.button == 2 || event.button == 3) 
{ 
event.cancelBubble = true 
event.returnValue = false; 
return false; 
} 
} 
document.oncontextmenu = nocontextmenu; //for IE5+ 
document.onmousedown = norightclick:; // for all others 
//--> 
</script> 
单 击 右键 看 看 ， 没 有 右键 菜单 了 ! 
</body> 
</html> 


在 <body> 中 添加 代码 “<body onselectstart="return false">” 将 取消 用 户 的 选择 操作 ， 防 止 用 户 
复制 网 页 中 的 文本 内 容 。 
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15.2.6 ”震动 的 图 像 
该 特效 实现 的 效果 是 当 鼠 标 指针 移 到 图 像 上 时 ， 
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样 。 其 代码 如 下 : 
<style> 
.Shakeimagef 
position:relative 
} 
</style> 
<script language="JavaScript1.2"> 
Var rector=3 
var stopit=0 
var a=1 
function init(which){ 
stopit=0 
shake=which 
shake.style.left=0 
shake.style.top=0 
} 
function rattleimage(){ 
if ((!document.all&&!document.getElementByl1d)|l|stopit==1) 
return 
if (a==1){ 
Shake.style.top=parseInt(shake.style.top)+rector 
} 
else if (a==2){ 
Shake.style.left=parseInt(shake.style.left)+rector 
} 
else if (a==3){ 
shake.style.top=parseInt(shake.style.top)-rector 
} 
elsef 
shake.style.left=parselInt(shake.style.left)-rector 
} 
if (a<4) 
at+ 


else 


E 震动， 犹如 有 动态 效果 一 


本 例 首先 将 “<script> </script>” 代 码 段 添加 到 网 页 中 ,再 在 需要 添加 该 特效 的 图 片 代码 中 添加 


on 


“class="shakeimage" onMouseover="init(this);rattleimage()" on Mouseout="stoprattle(this)"” 即 可。 
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a=1 

setTimeout("rattleimage()",50) 

} 

function stoprattle(which){ 

stopit=1 

which. style.left=0 

which. style.top=0 

} 

</script> 

<img src=6.gif ( 图 像 路 径 及 名 称 ) class="shakeimage" onMouseover="init(this); 
rattleimage()" onMouseout="stoprattle(this)"> 


15.3 ”精通 实例 一 一 制作 饰品 网 页 特效 
坟 


Pa 本 章 的 精通 实例 将 对 饰品 网 页 中 的 个 别 图 像 和 文字 添加 特效 ， 使 网 页 具有 
图 像 震动 效果 和 文本 动态 链接 注释 效果 ， 如 图 15-7 所 示 。 


G00NN> Let s go on 


15-7 ”饰品 特效 页 面 


15.3.1 行业 分 析 


本 例 为 了 使 网 页 更 具 特 色 ， 在 原 有 的 饰品 网 页 中 添加 了 一 些 动态 特效 ， 给 浏览 者 
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如 果 图 像 的 路 径 和 名 称 不 正确 ， 将 不 能 显示 图 像 ， 或 者 如 果 链 接 的 图 像 不 存在 ， 也 不 能 显示 图 
像 ， 但 是 预览 时 该 缺失 图 像 的 图 标 也 会 实现 震动 效果 。 


一 些 新 意 。 
根据 不 同类 型 的 表格 ， 可 以 适当 选择 不 同 的 特效 ， 达 到 美化 和 衬托 的 作用 。 本 例 将 分 
别 对 部 分 图 像 和 文本 进行 特效 显示 处 理 ， 为 本 来 较 “ 静 ”的 页 面 添加 一 些 生 气 。 


15.3.2 ”操作 思路 
为 更 快 完成 本 例 的 制作 ， 并 尽 可 能 运用 本 章 讲解 的 知识 ， 本 例 的 操作 思路 如 下 。 


BE 5 


15.3.3 ”操作 步骤 


下 面 介绍 为 网 页 添加 特效 的 方法 。 其 操作 步骤 如 下 : 
”光盘 \ 素 材 \ 第 15 章 \shipin\shipin.html 
网” 光盘 \ 效 果 \ 第 15 章 \shipin\shipin.html 
守 世 得 ”光盘 \ 实 例 演示 \ 第 15 章 \ 制 作 饰 品 网 页 特效 > 
国 打 开 网 页 文件 “shipin.html”"， 选 择 页 面 上 方 的 小 鱼 图 像 ， 如 图 15-8 所 示 ， 并 在 “ 属 
性 ”面板 中 查看 该 图 像 文件 的 路 径 和 名 称 。 


图 15-8 选择 图 像 
国 切 换 到 代码 视图 ， 将 选中 的 代码 蔡 换 为 下 面 的 特效 代码 。 
<style> 
.Shakeimagef 


输入 的 代码 需要 替换 掉 原 来 的 代码 ， 因 为 在 代码 中 已 经 添加 了 链接 或 显示 该 对 象 的 代码 。 如 果 
没有 替换 ， 将 多 出 一 部 分 内 容 。 
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position:relative 

} 

</style> 

<script language="JavaScript1.2"> 

Var rector=3 

var stopit=0 

Var a=1 

function init(which){ 

stopit=0 

shake=which 

shake.style.left=0 

Shake.style.top=0 

} 

function rattleimage(){ 

if ((!document.all&&!document.getElementByld)||stopit==1) 
return 

if (a==1){ 
shake.style.top=parselInt(shake.style.top)+rector 
} 

else if (a==2){ 
Shake.style.left=parseInt(shake.style.left)+rector 
} 

else if (a==3){ 
Shake.style.top=parseInt(shake.style.top)-rector 
} 

elsef{ 
shake.style.left=parseInt(shake.style.left)-rector 
} 

if (a<4) 

at+ 

else 

a=1 

setTimeout("rattleimage()",50) 

} 

function stoprattle(which){ 

stopit=1 

which.style.left=0 

which.style.top=0 


天 国 


代码 中 一 些 参 数 可 以 做 适当 修改 ,以 对 效果 进行 调整 ， 但 是 用 户 需 要 了 解 各 段 代码 的 含义 ， 否 
则 还 是 不 要 轻易 修改 。 


-0 
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</script> 
<img src=img/dongtai.gif class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout= 
"stoprattle(this)"> 
返回 设计 视图 ， 可 看 到 图 像 前 多 了 个 特效 标记 ,选中 后 面 的 “ 购 旺 让 我 们 继续 够 旺 ” 
文本 ， 如 图 15-9 所 示 。 


图 15-9 选择 文本 
国 再 次 切换 到 代码 视图 ， 将 选中 的 代码 蔡 换 为 以 下 的 代码 。 

<STYLE type="text/css"> 

<ls 

body,div,a{font:menu} 

.article { 

BORDER-BOTTOM: black lpx solid; BORDER-LEFT: black lpx solid; BORDER- 
RIGHT:black lpx solid; BORDER-TOP: black lpx solid; FILTER: revealTrans(transition=23, 
duration=0.5) blendTrans(duration=0.5); POSITION: absolute; VISIBILITY: hidden; background- 
color: #FFCCO00; padding-top: 3px; padding-right: 3px; padding-bottom: 3px; padding-left: 3px} 

--> 

</STYLE> 

<SCRIPT language=JavaScript1.2> 

4 

function Show(divid) { 

divid.filters.revealTrans.apply(); 

divid.style.visibility = "visible"; 

divid.filters.revealTrans.play(); 

} 

function Hide(divid) { 

divid.filters.revealTrans.apply(); 

divid.style.visibility = "hidden"; 

divid.filters.revealTrans.play(); 

} 

//--> 


</script> 


其 实 网 页 中 原来 的 图 像 和 文本 也 可 以 不 要 ， 只 需 在 适当 的 位 置 直 接 加 入 特效 代码 即 可 ， 这 里 为 
了 使 用 户 快 速 定位 到 需要 添加 代码 的 位 置 ， 所 以 添加 了 替代 的 对 象 。 
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</head> 
<body> 
<a href="#" on MouseOver=Show(aaa) on MouseOut=Hide(aaa)> 
购 旺 让 我 们 继续 够 旺 </a> 
<div id="aaa" class="article">LET'S GO ON</div> 
国 急 换 回 设计 视图 ， 显示 效果 如 图 15-10 所 示 ， 保 存 并 预览 网 页 。 当 鼠标 指针 移动 到 小 
和 鱼 图 像 上 时 ， 图像 将 进行 震动 ; 将 鼠标 指针 移动 到 设置 了 特效 的 文本 上 时 ， 将 弹出 动 


态 链接 注释 。 


图 15-10 添加 动态 链接 注释 后 的 效果 


15.4 ”精通 练习 一 一 熟悉 各 种 特效 代码 


在 Dreamweaver CS6 中 同时 显示 了 链接 文本 和 注释 文本 ,但 是 在 浏览 器 中 预览 时 ,将 只 显示 链 
接 文 本 ， 当 息 标 指针 移动 到 链接 文本 上 时 才 会 显示 注释 文本 。 


这 关键 提示 : 


本 次 练习 以 熟悉 操作 为 主 ， 要 注意 以 下 几 点 提示 : 
人 ”可 以 单独 制作 不 同 的 特效 页 面 ， 也 可 以 发 挥 自己 的 想法 ， 在 一 个 页 面 中 添加 多 个 特效 。 
口 ” 如 果 要 添加 多 个 特效 ， 注 意 不 同 特效 代码 不 能 交叉 。 


-全 ee .其 他 网 页 特效 代码 -一 可 


通过 JavaScript， 还 可 实现 很 多 其 他 网 页 特效 ， 如 滚动 字幕 、 网 页 漂浮 广告 、 显 

示 当 前 日 期 、 连 续 横向 滚动 图 片 、 翻 动 图 片 新 闻 和 图 片 透明 效果 等 。 通 过 特效 代码 ， 

可 以 实现 各 种 各 样 的 网 页 特效 ， 用 户 可 以 直接 在 网 上 搜索 ， 一 些 专门 的 网 页 代码 网 

站 提供 了 非常 多 的 代码 ( 如 http://bbs.51js.com )， 只 需 按 照 其 说 明 ， 将 代码 复制 到 
网 页 的 适当 位 置 ， 并 进行 简单 的 修改 和 调试 ， 即 可 实现 网 页 特效 。 

Ad 


使 用 网 上 复制 的 代码 时 ， 最 好 先 在 不 重要 的 网 页 中 试验 ， 确 保 效果 能 实现 ， 并 对 网 页 没有 负面 
影响 时 ， 再 使 用 到 正式 的 网 页 中 。 
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a 创建 页 面 组 件 


列表 视图 布局 网 格 
可 折 巷 区 块 选择 菜单 et 


认识 jQuery 


认识 jQuery Mobile 


和 eis 


随 着 科技 的 发 展 ;， 通 过手 机、 平板 电脑 等 移动 电子 设 
备 浏览 网 页 已 经 非常 普遍 ， 并 且 由 于 移动 设备 的 便携 性 和 
无 线 网 络 的 助 推 ， 移 动 上 网 得 到 了 飞速 的 发 展 。 为 了 顺应 ， 
科技 发 展 的 需求 , Dreamweaver CS6 中 首次 置 入 了 移动 设备 

网 页 的 创建 和 编辑 功能 。 下 面 将 详细 介绍 在 Dreamweaver 
CS6 中 创建 和 编辑 移动 设备 网 页 的 方法 。 


创建 移动 设备 页 面 


了 
二 


注 血 需 讨 
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____ 和 
16.1 使 用 jQuery Mobile 创建 移动 设备 网 页 


jQuery Mobile 是 jQuery 在 手机 和 平板 电脑 等 移动 设备 上 的 版 本 。 它 不 仅 
) 可 以 给 主流 移动 平台 带 来 jQuery 核心 库 ， 还 可 以 发 布 一 个 完整 统一 的 
着。 jQuery 移动 UI 框架 。 
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16.1.1 认识 jQuery 和 jQuery Mobile 


jQuery 是 继 Prototype 之 后 的 又 一 个 优秀 的 JavaScript 框架 ， 是 一 个 兼容 多 浏览 器 的 
JavaScript 库 ， 同 时 兼容 CSS 3。 它 可 以 让 用 户 更 方便 地 处 理 HTML documents、events、 实 
现 动 画 效果 ,并 且 为 网 站 提供 Ajax 交互 ， 同 时 还 有 许多 成 熟 的 插件 可 供 选 择 。 也 可 以 使 用 
户 的 HTML 页 面 保持 代码 和 内 容 分 离 的 状态 , 用 户 不 用 在 HTML 中 插入 一 堆 JavaScript 来 
调用 命令 ， 只 需 定义 ID 即 可 。 

jQuery 是 一 种 免费 、 开 源 的 应 用 ， 其 语法 设计 使 开发 者 的 操作 更 加 便捷 ， 如 操作 文档 
对 象 、 选 择 DOM 元 素 、 制 作 动画 效果 、 事 件 处 理 、 使 用 Ajax 以 及 其 他 功能 等 。 其 模块 化 
的 使 用 方式 使 开发 者 可 以 很 轻松 地 开发 出 功能 强大 的 静态 或 动态 网 页 。 

jQuery Mobile 支持 全 球 主流 的 移动 平台 ， 不 仅 给 主流 移动 平台 带 来 jQuery 核心 库 ， 
还 会 发 布 一 个 完整 统一 的 jQuery 移动 UI 框架 。 如 图 16-1 所 示 为 jQuery Mobile 在 手机 和 
平板 电脑 上 的 应 用 。 


图 16-1 jQuery Mobile 在 手机 和 平板 电脑 上 的 应 用 


16.1.2 ”创建 移动 设备 页 面 


在 Dreamweaver CS6 中 集成 了 jQuery Mobile, 用 户 可 以 通过 Dreamweaver CS6 快速 设 
计 出 适合 大 多 数 移动 设备 的 Web 应 用 程序 。 在 Dreamweaver CS6 中 创建 移动 设备 页 面 有 两 
种 方法 。 下 面 分 别 进行 介绍 。 


移动 页 面 针 对 手机 等 移动 设备 ， 由 于 大 多 数 移动 设备 一 般 使 用 的 是 服务 商 提供 的 无 线 网 络 ， 其 
流量 并 不 能 与 普通 电脑 使 用 的 宽带 相 比 ， 所 以 小 巧 是 移动 页 面 的 主要 特点 之 一 。 


[本 中 文 版 Dreamweaver C56 网 页 制作 从 入 门 到 精通 Gr 伺 


1. 通过 jQuery Mobile 起 始 页 创建 


启动 Dreamweaver CS6 后 ， 选 择 【 文件 ] 人 【 新 建 】 命令， 在 打开 的 “新 建文 要 ”对 话 
框 的 左 侧 选 择 “示例 中 的 页 ”选项 卡 ， 在 中 间 的 “示例 文件 夹 ”列表 框 中 选择 “Mobile 起 
始 页 ”选项 ， 在 右 侧 的 “示例 页 ”列表 框 中 选择 一 种 类 型 ， 单 击 区 是 @ 避 按钮 即 可 ， 如 
图 16-2 所 示 。 
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图 16-2 创建 示例 页 
2. 使 用 HTML 5 页 创建 


在 Dreamweaver CS6 中 ， 用 户 也 可 以 先 创 建 一 个 HTML5 页 面 ， 然 后 在 页 面 中 添加 
jQuery Mobile 组 件 来 创建 移动 页 面 。 
Ded 


上 71 于 > 使 用 HTML 5 页 创建 移动 页 面 @。 


国 远 托 【文件 〗/【 新 建 〗 命 令 ， 在 打开 的 “新 建文 档 ” 对 话 框 中 选择 “空白 页 ”选项 
卡 ， 并 选择 页 面 类 型 为 “HTML 文档 *"， 在 右 下 角 的 “文档 类 型 ”下 拉 列 表 框 中 选择 
“HTML 5” 选 项 ， 单 击 世 E 寿 @ 本 按钮 创建 新 的 页 面 ， 如 图 16-3 所 示 。 

国 在 “插入 ”面板 的 下 拉 列 表 框 中 选择 “jQuery Mobile” 选项 ,切换 到 “jQuery Mobile” 
插入 面板 ， 单 击 “ 页 面 ”按钮 | 器 ， 如 图 16-4 所 示 。 


文档 类 型 
TE SS OE fm 4.01 Transitional 
附加 css 文件 : HTML 401 St 


0 人 | 选择 ] 


XHTNL 1. 0 Tr 
XHINL 1.0 Strict 


XHL 1.1 
启用 Inconte MNTNL Nobile 1.0 


图 16-3 选择 文档 类 型 


天 国 


HTML 5 是 一 个 用 于 取代 1999 年 所 制定 的 HTML 4.01 和 XHTML 1.0 标 准 的 HTML 标准 新 版 本 ， 
尽管 现在 仍 处 于 发 展 阶段 ， 但 大 部 分 浏览 器 已 经 支持 某 些 HTML 5 技术 。 
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国 打 开 “jQuery Mobile 文件 ”对 话 框 ， 在 其 中 选择 适当 的 类 型 后 单 击 EEE 按钮 ， 
如 图 16-5 所 示 。 


国 在 打开 的 “jQuery Mobile 页 面 ”对 话 框 中 输入 ID 名 称 ， 并 设置 是 否 需要 标题 和 脚注 
后 ， 单 击 EM 按钮 完成 页 面 创建 ， 如 图 16-6 所 示 。 
C5[ 单 市 局 吉 = 
jQuery Mobile 页 面 
JQuery 甘 源 ID paee 
Be 标题 [ 困 放 于 ] 
本 加 a 
| | 
16-5 “jQuery Mobile 文件 ”对 话 框 图 16-6 “jQuery Mobile 页 面 ”对 话 框 


16.1.3 ”创建 移动 页 面 组 件 


jQuery Mobile 提供 了 多 种 组 件 , 用 于 为 移动 页 面 添 加 不 同 的 页 面 元 素 , 丰富 页 面 内 容 ， 
如 列表 、 文 本 区 域 、 复 选 框 和 单 选 按 钮 等 。 下 面 分 别 进行 介绍 。 


1. 创建 列表 视图 


将 鼠标 光标 定位 到 jQuery Mobile 页 面 中 ， 单 击 “jQuery Mobile” 插 入 面板 中 的 “列表 
视图 " 按钮 贺 , 在 打开 的 “jQuery Mobile 列表 视图 " 对 话 框 中 选择 列表 属性 后 单 击 [_ 确定 
按钮 可 创建 需要 的 列表 ， 如 图 16-7 所 示 。 
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16-7 创建 列表 视图 
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在 “jQuery Mobile 文 件 ” 对 话 框 中 默认 选中 “远程 (CDN )” 单 选 按钮 , 如 果 要 连接 到 承载 jQuery 
Mobile 文件 的 CDN 服务 器 ， 并 且 尚 未 配置 包含 jQuery Mobile 文件 的 站 点 ， 则 可 选择 该 默认 选项 。 
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2. 创建 布局 网 格 


由 于 移动 设备 的 屏幕 都 比较 窗 ， 所 以 一 般 不 会 在 移动 设备 上 使 用 多 栏 布 局 的 方式 。 但 
有 时 由 于 一 些 特殊 要 求 ， 也 会 需要 将 一 些小 的 网 页 元 素 进行 并 排放 置 ， 这 时 可 使 用 布局 网 
格 功能 来 对 网 页 进行 布局 。 

将 鼠标 光标 定位 到 需要 进行 并 排 的 位 置 ， 单 击 “jQuery Mobile” 插 入 面板 中 的 “ 布 
网 格 ”按钮 加 ， 在 打开 的 “jQuery Mobile 布局 网 格 ” 对 话 框 中 设置 行 和 列 的 数量 后 单 
匡 栈 本 按钮 ， 可 创建 相应 的 布局 ， 如 图 16-8 所 示 。 
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3. 添加 可 折 生 区 块 


在 页 面 中 创建 可 折 芭 区 块 后 ， 可 以 通过 单 击 其 标题 展开 或 收缩 其 下 面 的 内 容 ， 达 到 节 
省 空间 的 目的 ， 如 图 16-9 所 示 。 添加 可 折 芭 区 块 ， 只 需 单 击 “jQuery Mobile” 插 入 面板 中 
的 “可 折 重 区 块 ” 按 钮 锣 ， 然 后 在 添加 的 区 块 中 输入 标题 和 内 容 即 可 。 


图 16-9 添加 可 折合 区 块 


4. 添加 文本 元 素 


同 普通 网 页 中 的 表单 一 样 , 移动 网 页 也 可 以 添加 文本 、 密 码 等 元 素 。 在 “jQuery Mobile” 
插入 面板 中 单 击 “ 文 本 输入 ”按钮 右 、“ 密码 输入 ”按钮 葬 或 “文本 区 域 ”按钮 防 ， 可 在 
页 面 中 添加 相应 的 文本 框 、 密 码 框 或 多 行 的 文本 域 ， 用 于 输入 信息 ， 如 图 16-10 所 示 。 


人 


除了 使 用 “jQuery Mobile” 插 入 面板 进行 页 面 组 件 的 插入 外 , 也 可 选择 【插入 /jQuery Mobile】 
下 的 选项 来 创建 和 添加 各 种 页 面 元 素 。 


时 各 动 设备 网 页 及 应用 在 序 bl 建 | 医生 || 


Pe he ee Cy 


5. 选择 菜单 


同 表单 中 的 选择 菜单 一 样 ， 在 “jQuery Mobile” 插 入 面板 中 单 击 “ 选 择 菜单 ”按钮 局 ， 
可 在 页 面 中 插入 一 个 选择 菜单 ， 选 择 该 菜单 ， 在 “属性 ”面板 中 单 击 Eee 按钮 ， 在 
打开 的 “列表 值 ”对 话 框 中 进行 项 目标 签 和 值 的 设 定 ， 如 图 16-11 所 示 。 


optionl 
option2 
option3 


图 16-10 各 种 文本 元 素 图 16-11 设置 菜单 列表 值 
6. 添加 复 选 框 和 单 选 按钮 


复 选 框 和 单 选 按钮 用 于 页 面 中 选项 的 选择 ， 复 选 框 可 以 多 选 ， 而 单 选 按钮 只 能 选择 一 
项 。 复 选 框 和 单 选 按钮 的 创建 方法 基本 相同 ， 在 “jQuery Mobile” 插 入 面板 中 单 击 “ 复 选 
框 ” 按 钮 圆 或 “ 单 选 按 钮 ”按钮 辆 ， 可 打开 “jQuery Mobile 复 选 框 ”或 “jQuery Mobile 
单 选 按钮 ”对 话 框 ， 在 其 中 可 对 名 称 、 数 量 和 布局 方式 进行 设置 ， 如 图 16-12 所 示 。 


16-12 添加 复 选 框 


7. 按钮 和 滑 块 


按钮 和 滑 块 也 是 网 页 的 主要 元 素 之 一 ， 在 “jQuery Mobile” 插 入 面板 中 单 击 “ 按 钮 ” 
按钮 国 ， 打 开 “jQuery Mobile 按钮 ”对 话 框 ,在 其 中 进行 各 种 参数 的 设置 后 单 击 匡 栈 刁 按 
钮 ， 可 在 页 面 中 添加 按钮 。 在 “jQuery Mobile” 插 入 面板 中 单 击 “ 滑 块 ”按钮 加 ， 可 直接 
在 页 面 中 添加 一 个 滑 块 组 件 ， 选 择 组 件 后 可 在 “属性 ”面板 中 对 属性 和 参数 进行 设置 。 


在 “jQuery Mobile 复 选 框 ” 对 话 框 中 ,“ 复 选 框 ”下 拉 列 表 框 用 于 设置 添加 的 复 选 框 数量 。 
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8. 翻转 切换 开关 


开关 在 移动 设备 上 是 一 个 常用 的 ui 元素， 可 翻转 地 切换 开 / 关 ， 或 输入 true/false 类 型 
的 数据 ,如 图 16-13 所 示 为 Dreamweaver CS6 中 的 翻转 切换 开关 组 件 和 预览 效果 。 在 "jQuery 
Mobile” 插 入 面板 中 单 击 “翻转 切换 开关 ”按钮 匣 可 插入 组 件 ， 插 入 后 选择 组 件 ， 还 可 在 
“属性 ”面板 中 对 属性 进行 设置 。 


选项 
选项 : 关 | 
图 16-13 翻转 切换 开关 


16.2 ”打包 移动 应 用 


使 用 PhoneGap 服务 ， 可 以 将 Web 应 用 程序 作为 本 机 移动 应 用 程序 进行 打 
包 。 通过 与 Dreamweaver 的 集成 ， 生 成 应 用 并 在 Dreamweaver 站 点 中 保存 
该 应 用 ， 然 后 将 其 上 传 至 PhoneGap Build 服务 。 


16.2.1 注册 PhoneGap Build 


要 使 用 PhoneGap 服务 ， 需 要 先 注册 PhoneGap Build 服务 账户 ， 只 有 注册 了 账户 ， 才 
能 使 用 PhoneGap Build 和 Dreamweaver, 可 登录 "https://build.phonegap.com/people/sign_up” 
网 页 进行 账户 注册 ， 如 图 16-14 所 示 ， 在 页 面 中 单 击 “Register” 超 级 链接 可 打开 注册 页 面 
进行 注册 ， 并 可 在 打开 的 页 面 中 选择 免费 选项 ， 如 图 16-15 所 示 。 
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由 于 PhoneGap Build 是 外 国 公司 的 网 站 ， 所 以 页 面 中 显示 的 为 英语 ， 可 根据 英文 提示 在 页 面 中 
完成 注册 信息 的 填写 等 操作 。 
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16.2.2 ”打包 移动 程序 


利用 Dreamweaver 和 PhoneGap Build 相 结 合 的 优势 ， 用 户 可 以 将 使 用 Web 技术 开发 
设计 的 应 用 上 传 到 PhoneGap Build 服务 , 并 且 PhoneGap Build 会 自动 将 其 编译 成 不 同 平台 
的 应 用 ， 包 括 苹果 的 App Store、Android Market、WebOS、Symbian 和 Blackberry 等 。 

选择 【 站 点 ]/【 PhoneGap Build 服务 ]/【 PhoneGap Build 服务 ] 命令 , 打开 “PhoneGap 
Build 服务 ”对 话 框 , 在 其 中 使 用 注册 的 邮件 地 址 和 密码 登录 , 在 打开 的 对 话 框 中 直接 单 击 
外 册 按 钮 ， 登 录 后 根据 移动 设备 的 系统 类 型 选择 应 用 程序 文件 ， 单 击 国 按 钮 ， 在 打开 的 对 
话 框 中 选择 下 载 位 置 将 其 下 载 到 电脑 中 ， 如 图 16-16 所 示 。 
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图 16-16 ”登录 和 下 载 应 用 程序 


16.3 ”精通 实例 一 一 制作 jQuery Mobile 页 面 


本 章 的 精通 实例 将 创建 一 个 jQuery Mobile 页 面 ,并 在 其 中 添加 页 面 组 件 和 
内 容 ， 设 计 一 个 简单 的 移动 设备 页 面 的 效果 如 图 16-17 所 示 。 
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图 16-17 移动 页 面 效 果 
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不 同 手机 的 操作 系统 是 不 一 样 的 ， 就 像 电脑 中 可 以 安装 Windows 操作 系统 ， 也 可 以 安装 UNIX 
操作 系统 一 样 , 而 手机 的 系统 在 出 厂 前 已 经 国定 ,一 般 不 能 由 用 户 重 装 其 他 系统 ,所 以 jQuery Mobile 
页 面 需要 考虑 不 同 操作 系统 的 版 本 。 
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16.3.1 行业 分 析 


本 例 制 作 的 jQuery Mobile 页 面 主要 是 应 用 于 手机 、 平 板 电脑 等 移动 设备 , 所 以 其 制作 
方法 同 普通 的 Web 有 一 些 不 同 之 处 。 

从 页 面 的 创建 来 说 , jQuery Mobile 页 面 不 同 于 普通 的 HTML 页 面 , 更 不 同 于 动态 电脑 
页 面 ， 其 页 面 更 加 简单 。 

从 网 页 设计 来 说 ，jQuery Mobile 页 面 中 所 添加 的 页 面 元 素 也 比较 单一 ， 相 当 于 普通 页 
面 中 的 一 些 表单 元 素 的 添加 ， 主 要 还 在 于 内 容 的 填充 。 


16.3.2 ”操作 思路 


为 更 快 完成 本 例 的 制作 ， 并 尽 可 能 运用 本 章 讲解 的 知识 ， 本 例 的 操作 思路 如 下 。 


16.3.3 ”操作 步骤 


下 面 介绍 jQuery Mobile 页 面 的 创建 和 制作 方法 。 其 操作 步骤 如 下 : 


好 2 光盘 \ 效 果 \ 第 16 章 \mobile\mobile.html 

NiW 光盘 光盘 \ 实 例 演示 \ 第 16 章 \ 制 作 jQuery Mobile 页 面 > 

俩 育才 Dreamweaver CS6， 选 择 【 文 件 】/【 新 建 】 命 令 ， 在 打开 的 “新 建文 档 ” 对 话 
框 中 选择 “空白 页 ”选项 卡 ， 并 选择 页 面 类 型 为 “HTML 文档 *"， 在 右 下 角 的 “文档 
类 型 ”下 拉 列 表 框 中 选择 “HTML 5” 选 项 ， 单 击 EEEG9 按 钮 创建 新 的 页 面 。 

国 在 “jQuery Mobile” 插 入 面板 中 单 击 “ 页 面 ”按钮 器 ， 打 开 “jQuery Mobile 文件 ” 
对 话 框 .在 “链接 类 型 " 栏 中 选中 四 # 地 单 选 按钮 ,在 “CSS 类 型 > 栏 中 选中 回 折 分 (结构 和 主题) 
单 选 按钮 ， 单 击 匡 确定 按钮 ， 如 图 16-18 所 示 。 


四国 


不 仅仅 是 移动 页 面 在 互联 网 中 的 普及 ， 其 实 早 在 很 多 年 前 ， 手 机 应 用 程序 如 手机 游戏 、 电 子 书 
等 就 已 经 占据 了 很 大 的 市 场 ， 如 今 更 是 百花 齐 放 ， 各 种 客户 端 软件 已 占据 了 移动 平台 的 半壁 江山 。 
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JOuery 床 源 : Eile://7D1/Prograa Files/Adobe/Adobe Dreanveaver C56/Coni 站 
JOuer Mobile Javascript jauery-mobile/ jauer | 
jQuery Moblle css: |jauery-nobile/ jauery. nobi 
Jouenr [jquery-nobile/ jquery-1. 


图 16-18 “jQuery Mobile 文件 ”对 话 框 
国 在 打开 的 对 话 框 中 直接 单 击 臣 酉 二 按钮 插入 jQuery Mobile 页 面 ， 将 鼠标 光标 定位 
到 “内 容 ” 文 本 后 面 ， 单 击 “jQuery Mobile” 插 入 面板 中 的 “布局 网 格 ” 选 项 。 
国 在 打开 的 “jQuery Mobile 布局 网 格 " 对 话 框 中 设置 布局 网 格 为 2 行 3 列 , 单 击 三 和 
按钮 插入 ， 如 图 16-19 所 示 。 


图 16-19 插入 布局 网 格 

全 将 鼠标 光标 定位 到 布局 网 格 上 方 ， 单 击 “jQuery Mobile” 插 入 面板 中 的 “可 折 王 区 
块 ”按钮 国 ， 在 页 面 中 添加 可 折 生 区 块 元 素 ， 如 图 16-20 所 示 。 

国 添 加 后 在 页 面 中 和 名 区 块 处 输入 标题 和 内 容 ， 如 图 16-21 所 示 。 
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在 进行 页 面 预 览 前 要 记得 先 保存 网 页 文档 ， 由 于 Dreamweaver CS6 不 会 在 执行 预览 操作 时 提示 
用 户 保存 文档 ， 所 以 如 果 没有 执行 保存 操作 ， 看 到 的 页 面 将 不 是 修改 或 编辑 过 的 最 终 效果 。 


3 


CD 
DN 
~ 


-------O 


国 按 “Ctrit+S” 快 姜 刍 保存 网 页 ， 选 择 【 文 件 〗/【 多 屏 预 览 】 命 令 ， 打 开 “ 多 屏 预 览 ” 
窗口 进行 效果 预览 ， 如 图 16-22 所 示 。 最 后 按 “F12” 键 在 浏览 器 中 预览 。 
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16-22 ”多 屏 预 览 


16.4 ”精通 练习 一 一 制作 并 打包 移动 应 用 


| 本 次 练习 将 为 用 户 自行 创建 和 设计 一 个 jQuery Mobile 页 面 , 并 在 其 中 添加 
人 ) 各 种 组 件 和 内 容 ， 然 后 尝试 使 用 PhoneGap Build 进行 应 用 打包 ， 参 考 效果 
K 刷 如 图 16-23 所 示 。 
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图 16-23 手机 软件 网 页 参考 效果 


多 屏幕 预览 的 效果 是 通过 对 不 同 分 辩 率 的 显示 效果 ， 让 用 户 来 预测 在 不 同 分 辩 率 的 设备 屏幕 中 
显示 的 网 页 效果 。 


下 光盘 \ 实 例 演示 \ 第 16 章 \ 制 作 并 打包 移动 应 用 


该 练习 的 操作 思路 与 关键 提示 如 下 。 
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注册 PhoneGap Bui ee 


这 关键 提示 : 


本 次 练习 可 参考 以 下 提示 : 

中 ”添加 页 面 组 件 并 不 一 定 是 所 有 组 件 都 添加 ， 不 同 的 页 面 可 添加 不 同 的 组 件 。 
进行 打包 前 需要 注册 PhoneGap Build 账号 ， 并 牢记 注册 的 邮箱 账号 和 密码 。 
打包 后 可 下 载 不 同 版 本 的 应 用 。 
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1 现 如 今 , jQuery 驱动 着 Internet 上 的 大 量 网 站 ， 在 浏览 器 中 提供 动态 用 户 体验 ， 
! 促使 传统 桌面 应 用 程序 越 来 越 少 。 目 前 主流 移动 平台 上 的 浏览 器 功能 都 基本 使 用 了 
! 桌面 浏览 器 ， 因 此 ，jQuery 团队 引入 了 jQuery Mobile ( 或 JQM )。JQM 的 使 命 是 向 
! 所 有 主流 移动 浏览 器 提供 一 种 统一 体验 ， 不 管 使 用 哪 种 查看 设备 ， 都 能 使 整个 
! Internet 上 的 内 容 更 加 丰富 。 

[ JQM 的 目标 是 在 一 个 统一 的 UI 中 交付 超级 JavaScript 功能 , 跨 最 流行 的 智能 手 
! 机 和 平板 电脑 设备 工作 。 与 jQuery 一 样 ，JQM 是 一 个 在 Internet 上 直接 托管 、 免 费 
1 


可 用 的 开源 代码 基础 。 


使 用 jQuery Mobile 创建 和 设计 的 页 面 会 根据 移动 设备 的 大 小 ， 自 动 调整 网 页 的 布局 ， 所 以 在 
不 同 的 移动 设备 中 浏览 时 ， 其 窗口 的 布局 会 有 所 不 同 。 
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要 想 彻底 掌握 Dreamweaver CS6 的 使 用 方法 ， 并 通过 其 进行 网 页 的 制作 
和 设计 ， 需 要 对 本 书 所 学 的 知识 进行 练习 和 巩固 ， 以 熟练 掌握 制作 网 页 的 流程 
和 方法 。 通 过 Dreamweaver CS6 几 乎 能 制作 任何 类 型 的 网 页 ， 下 面 将 通过 制作 
植物 网 站 、 汽 车 世界 网 站 和 个 人 博客 网 站 为 例 ， 讲 解 网 页 制作 的 整体 流程 和 方 
法 ， 以 便 通过 本 篇 的 学 习 ， 使 用 户 综合 练习 本 书 所 学 的 知识 ， 并 彻底 掌握 网 页 
制作 的 方法 。 


第 17 章 ”制作 植物 网 站 326 
第 18 章 ”制作 汽车 世界 网 站 .342 
第 19 章 ”制作 个 人 博客 网 站 .pp 356 
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制作 植物 网 站 


制作 页 胸 内 容 | 


可 


本 章 将 综合 运用 本 书 所 学 的 知识 ， 制 作 一 个 植物 网 站 。 
在 该 网 站 中 将 通过 Div+CSS 对 页 面 进行 布局 ， 并 通过 CSS 
对 页 面 中 的 内 容 进 行 美化 ， 制 作出 色彩 丰富 、 效 果 美观 的 导 
读 


网 站 。 在 制作 本 例 的 过 程 中 ， 将 运用 本 章 所 学 的 大 部 分 知 
识 ， 如 创建 站 点 、 创建 Div 标签 、 创 建 CSS 样式 、 添 加 并 
设置 表格 和 添加 图 片 等 6 


加 时 | 
17.1 ”实例 说 明 


植物 网 站 属于 信息 类 网 站 ， 在 制作 该 网 站 时 应 该 先 收集 制作 网 站 所 需 的 各 
类 素材 ， 再 通过 Dreamweaver CS6 进行 页 面 的 设计 与 美化 。 下 面 将 对 该 网 
页 的 具体 内 容 进行 描述 。 


本 例 将 先 创建 站 点 文件 ， 并 将 制作 网 站 需要 的 素材 都 统一 放置 到 其 中 ， 再 启动 
Dreamweaver CS6 来 进行 网 页 的 制作 。 该 网 站 以 浅 色 调 为 主 ， 通 过 棕色 、 绿 色 等 色彩 对 页 
进行 丰富 ， 并 在 其 中 添加 文字 与 图 片 。 该 网 站 分 为 上 、 中 、 下 3 个 结构 ， 上 方 用 于 放置 
站 的 主要 导航 条 ， 中 间 用 于 放置 主要 的 内 容 ， 下 方 用 于 显示 网 站 的 基本 信息 ， 其 效果 如 
图 17-1 所 示 。 
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图 17-1 植物 网 站 


刚 ， 光 盘 \ 素 材 \ 第 17 章 \plant\images 
和 加 光盘 光盘 \ 效 果 \ 第 17 章 \plant\index.html > 


该 例 主 要 制作 网 站 的 首页 ， 企 业 页 面 的 制作 方法 与 该 页 面 类 似 ， 可 直接 将 制作 完成 的 首页 另存 
为 模板 后 ， 再 在 其 中 添加 各 个 页 面 需要 的 内 容 。 


各 总和 总 外 训 呈 必 让 
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17.2 行业 分 析 


本 例 主要 采用 Div+CSS 来 进行 制作 , 为 了 使 用 户 能 更 好 地 明白 并 掌握 本 例 
的 制作 需要 。 下 面 将 对 本 例 的 制作 进行 分 析 。 


在 制作 网 站 前 ， 应 先 明确 制作 网 站 的 目的 以 及 预期 的 效果 。 建 站 目的 不 同 ， 需 要 实现 

的 功能 不 同 ， 在 其 设计 与 规划 时 就 不 同 。 本 例 的 植物 网 站 属于 一 个 信息 类 的 网 站 ， 因 此 在 
制作 网 站 时 ， 需 要 注意 以 下 几 个 方面 : 

事先 准备 制作 网 站 需要 的 相应 资料 ， 如 Logo、 网 站 简介 、 产 品 图 片 、 产 品目 录 、 

报价 、 服 务 项 目 、 服 务 内 容 、 地 址 和 联系 方式 等 。 

由 于 信息 类 网 站 中 的 内 容 较 多 ,本 例 将 采用 三 栏 布局 , 将 页 面 的 中 间 用 于 显示 网 站 

的 主要 内 容 。 

为 了 更 好 地 体现 出 网 站 的 特色 ,本 例 将 划分 多 个 导航 条 ， 即 除了 网 站 上 方 的 主要 导 

航 条 外 ,将 再 添加 左 侧 的 内 容 导航 条 和 右 侧 的 快速 导航 条 , 使 用 户 在 浏览 本 网 站 时 

能 快速 找到 自己 需要 的 内 容 。 

为 了 更 清楚 地 表达 网 站 的 内 容 ， 网 站 将 采用 淡色 调 为 主 , 文本 、 图 片 等 的 颜色 则 采 

用 深 色 为 主 ， 以 使 用 户 有 一 种 轻快 的 感觉 。 

为 了 减少 用 户 阅 读 宛 余 的 文字 ， 产 生 枯 燥 感 ， 网 站 主页 将 尽量 采用 图 片 来 显示 ， 以 

吸引 用 户 的 目光 。 

网 站 中 的 信息 必须 准确 ， 不 要 为 用 户 提供 错误 的 信息 ， 提 高 网 站 的 质量 。 

网 站 首页 主要 用 于 体现 网 站 的 主要 服务 .特色 和 功能 ,不 要 添加 太 多 不 必要 的 内 容 ， 

以 免 引 起 用 户 的 反感 。 

确定 好 以 上 的 注意 事项 后 ， 就 可 以 开始 网 页 的 制作 了 ， 制 作 时 需要 先 建立 站 点 ， 并 将 

需要 的 素材 复制 到 其 中 。 为 了 使 网 站 制作 的 效果 更 加 美观 ， 用 户 还 可 以 在 制作 前 ， 对 网 站 
中 的 图 片 进行 适当 的 处 理 ， 以 提升 网 站 的 人 气 。 


17.3 “操作 思路 


本 例 涉及 本 书 讲解 的 大 部 分 知识 ， 通 过 综合 运用 这 些 知识 ， 能 使 网 站 的 制作 
效果 更 加 美观 。 如 创建 站 点 、 使 用 Div 和 CSS 布局 、 创 建 CSS 文件 等 。 下 面 
将 对 本 例 的 操作 思路 进行 介绍 ， 以 使 用 户 在 制作 的 过 程 中 更 加 得 心 应 手 。 


为 更 快 完成 本 例 的 制作 ， 并 尽 可 能 运用 本 书 讲解 的 知识 ， 本 例 的 操作 思路 如 下 。 


用 户 可 以 使 用 Photoshop、 光 影 魔术 手 、 美 图 秀 秀 等 图 像 处 理 软件 对 素材 进行 美化 ， 增 加 页 面 
的 美观 程度 。 
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17.4 “操作 步骤 


在 明确 操作 思路 之 后 ， 接 下 来 就 可 以 进行 植物 网 站 的 制作 了 。 本 例 将 制作 
植物 网 站 的 首页 ， 其 制作 步骤 可 分 为 以 下 几 个 。 


17.4.1 创建 站 点 和 网 页 文件 


下 面 将 新 建 “plant” 站 点 ， 创 建 网 站 主页 为 “index.html"， 并 新 建 “style.css” 层 释 样 
式 表 文件 ， 将 其 链接 到 网 站 中 ， 为 网 页 的 制作 创建 最 基本 的 文件 。 其 操作 步骤 如 下 : 


见 
es 光盘 \ 实 例 演示 \ 第 17 章 \ 创 建站 点 和 网 页 文件 > 


国语 动 Dreamweaver CS6， 选择 【站 点 〗/【 新 建站 点 】 命 令 ， 在 打开 对 话 框 的 “站 点 
名 称 ” 文 本 框 中 输入 “plant”， 在 “本 地 站 点 文件 夹 ” 文 本 框 中 设置 文件 的 根 目录 ， 
然后 单 击 [ER 按钮， 如 图 17-2 所 示 。 

俩 选择 【文件 ] /【 新 建 〗 命 令 ， 在 打开 的 对 话 框 中 保持 默认 设置 不 变 ， 单 击 EE 醒 ga 可 控 
钮 创建 一 个 空白 网 页 。 

国 在 新 建 的 空白 页 面 中 按 “Ctrlt+S” 快 捷 键 ,在 打开 的 对 话 框 中 将 其 存储 到 创建 的 “plant” 
站 点 根 目 录 下 ， 并 将 其 命名 为 “index.html”。 

国 选 择 【文件 1/【 新 建 ] 命 令 , 在 “空白 页 ” 选项 卡 的 “页 面 类 型 ” 列表 框 中 选择 “CSS” 
选项 ， 单 击 EEE 酸 ga 按钮 创建 一 个 空白 的 CSS 层 赤 样式 表 文 件 ， 如 图 17-3 所 示 。 

国 在 新 建 的 空白 CSS 层叠 样式 表 文 件 中 按 “Ctrlt+S” 快 捷 键 ， 在 打开 的 对 话 框 中 将 其 
存储 位 置 设置 为 “plant” 站 点 的 根 目录 ， 并 将 其 命名 为 “style.css”。 


用 户 也 可 以 直接 在 站 点 文件 夹 中 新 建 一 个 扩展 名 为 .css 的 层 司 样式 文件 , 再 将 其 链接 到 网 页 中 。 
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图 17-2 创建 站 点 图 17-3 新建 CSS 层 登 样式 表 
国 切换 到 “index.html” 页 面 中 ， 选 择 【窗口 ] /【CSS 样式 】 命 令 ， 打 开 “CSS 样式 ” 
面板 ， 在 其 中 单 击 “ 附 加 样式 表 ” 按 钮 图 。 
国 打 开 “ 链 接 外 部 样式 表 ” 对 话 框 ， 在 “文件 /URL” 文 本 框 中 输入 需 链接 的 CSS 样式 
表 文 件 ， 其 他 保持 默认 设置 不 变 ， 单 击 E 可 按钮 ， 如 图 17-4 所 示 。 
辆 完成 后 保存 “index.html” 页面， 此 时 ， 可 在 Dreamweaver CS6 的 “index.html” 下 
方 看 到 链接 后 的 “style.css” 文 件 ， 如 图 17-5 所 示 。 
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| _ 列 案 项 目 
Drewewer 的 区 出 竹 式 志 可 以 大 助 您 起 步 E79] 
图 17-4 链接 CSS 层 受 样式 表 图 17-5 查看 链接 后 的 文件 


17.4.2 ”布局 页 面 结 构 


下 面 将 对 页 面 的 整体 结构 进行 布局 ， 将 其 划分 为 上 、 中 、 下 3 栏 ， 并 对 中 间 部 分 的 页 
面 布局 进行 划分 。 其 操作 步骤 如 下 : 


见 
多 e: 光盘 \ 实 例 演示 \ 第 17 章 \ 布 局 页 面 结构 > > 


布局 页 面前 ， 可 以 先 绘制 网 页 的 结构 草图 ， 先 确定 每 一 部 分 的 位 置 ， 再 通过 Dreamweaver CS6 
进行 划分 。 


名 mas [| 


pv a 


国 将 刀 标 光标 定位 在 “index.html” 中 ， 选 择 【 插 入 】〗/【 布 局 对 象 〗/【Div 标签 】 命 令 ， 
打开 “插入 Div 标签 ”对 话 框 。 在 “ID” 下 拉 列 表 框 中 输入 “plant”， 单 击 [Gs 观 旭 按 
钮 ， 如 图 17-6 所 示 。 

国 打 开 “ 新 建 CSS 规则 ”对 话 框 ， 在 “规则 定义 ”下 拉 列 表 框 中 选择 “style.css” 选 
项 ， 其 他 设置 保持 不 变 ， 单 击 世 可 下 按 钮 ， 如 图 17-7 所 示 。 


新 建 C55 规则 有 
[04| 单 击 | 一 
E 一 | 
为 Ss 规 m6# 择 上 下 文 过 择 器 类 型 。 
ER A 
选择 器 名 称 : 
Lat 上 
和 
不 太 具 人 笨 本 具体 
规则 定义 : 
选择 定义 规 ME9 位 置 。 [0 可 选择 ] 
EE 四 
图 17-6 插入 Div 标签 图 17-7 新 建 CSS 规则 


俩 打开“#plant 的 CSS 规则 定义 (在 style.css 中 )” 对 话 框 ， 在 “分 类 ”列表 框 中 选 
择 “ 方 框 ” 选项 ,在 右 侧 的 “Width” 下 拉 列 表 框 中 输入 “1024”， 取 消 选 中 “Margin” 
栏 中 的 回 全 部 相同 中 复 选 框 ， 在 “Right” 和 “Left” 下 拉 列 表 框 中 选择 “auto” 选 项 ， 
单 击 EEBE 按 钮 ， 如 图 17-8 所 示 。 

俩 返回 “插入 Div 标签 ”对 话 框 ， 单 击 革 酶 下 按钮 ， 即 可 在 Dreamweaver CS6 中 查 
看 到 添加 标签 并 设置 其 CSS 后 的 效果 。 

国 则 除 “plant” 标签 中 的 文本 ， 使 用 相同 的 方法 ， 在 “plant” 标 签 中 插入 3 个 Div 标 
签 ， 分 别 将 其 命名 为 “top”、“main” 和 “foot”， 并 设置 其 CSS 样式 为 如 图 17-9 所 


示 的 样式 。 
plant 的 CSS 规则 定义 (在 slecs 中) [| op 1 
分 类 方 杠 height: 140px; 


width: 1024px; 
float: left; 
margin-bottom: 10px; 


fmain { 


height: 696px; 
Right ) EE width: 1024px; 
Bot t) 了 float: left; 
Lf) mp 


foot 
height: 8Spx; 
width: 1024px; 
float: left; 


ED 可 单 击 | oe) ED Gam 


图 17-8 设置 “plant” 标 签 的 CSS 样式 图 17-9 添加 并 设置 标签 样式 
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新 建 Div 标签 后 ， 可 以 在 源 代码 中 选中 需要 新 建 CSS 样式 的 Div 标签 ， 再 在 “CSS 样式 ”面板 
中 单 击 “新 建 CSS 规则 ”按钮 到 进行 新 建 。 
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俩 将 鼠标 光标 定位 在 id 为 “main” 的 Div 标签 中 ， 删 除 其 中 的 文字 ， 在 其 中 插入 id 名 
为 “left”、“maincontent” 和 “rightnav” 的 Div 标签 ， 其 源 代码 如 图 17-10 所 示 。 
再 使 用 相同 的 方法 设置 其 CSS 样式 ， 如 图 17-11 所 示 。 


est 
height: 696px; 
width: 245px; 
float: lefc; 


"plant"> 
rp"> 此 处 显示 id "topm 的 内 容 </div> 


height: 696px; 
width: 660px; 
float: lefc: 
margin-right: 13px; 


d="nain"> 
<diy id="left"> 此 处 显示 “id "1efz” 的 内 容 </div> 
<diy id="mainconcenc"> 比 外 显示 id "ainconcenc” 的 内 容 </ 
div> 
<diy id="rightnav"> 此 处 蜡 示 。 id "rightnav" 的 内 容 </div> 
</div> 
<diy id="foccn> 此 处 显示 id "foos" 的 内 容 </div> 
</div> 
</body> 
/n> 


#rightnav 
jac: lefc; 
width: 92px; 
height: 696px; 
margin-right: 14px; 
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图 17-10 Div 源 代码 图 17-11 设置 Div 的 CSS 样式 
俩 返回 网 页 中 ， 即 可 看 到 页 面 已 被 布局 完成 ， 其 效果 如 图 17-12 所 示 。 


于 让 蝇 示 玄 "op7 的 出众 
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通过 Div+CSS 布局 后 ， 用 户 可 以 直接 通过 修改 CSS 样式 ， 使 页 面 结构 发 生变 化 。 
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17.4.3 ”添加 网 页 头 部 内 容 
下 面 将 在 “top”Div 标签 中 布局 头 部 页 面 ， 并 添加 对 应 的 内 容 。 其 操作 步骤 如 下 : 


见 
二 4 光盘 \ 实 例 演示 \ 第 17 章 \ 添 加 网 页 头 部 内 容 > 


国 在 网 页 中 单 击 “ 属 性 ”面板 中 的 [EE 融 = 刁 按钮， 打开 “页 面 属性 ”对 话 框 。 在 “分 
类 ”列表 框 中 选择 “外 观 (CSS )” 选 项 ， 在 右 侧 的 “大 小 ”下 拉 列 表 框 中 输入 “12”， 
在 “背景 颜色 ”文本 框 中 输入 “#eee6d6”， 单 击 臣 本 本 按钮 ， 如 图 17-13 所 示 。 

俩 将 鼠标 光标 定位 在 “top”Div 标签 中 ， 删 除 其 中 的 文本 ， 在 其 中 插入 id 为 “topbg”、 
“logo” 和 “mainmenu” 的 Div 标签 ， 并 设置 其 CSS 样式 ， 如 图 17-14 所 示 。 


55 
background-image: url(images/index 01.91f) ;| 
height: 21px; 


分 类 sham ess) 
Ey 页 本 字体 中; 风 认 字体 -B71 


je: url(images/10g0.gif); 


float:! lefc; 
height: 101px; 


margin-right: 119px; 


LL ED CED 二 CE wideh: 660px; 
17-13 ”设置 页 面 属性 图 17-14 添加 并 设置 Div 标签 


国 完 成 后 再 在 id 为 “topbg” 的 Div 标签 中 添加 一 个 id 为 “topnav” 的 Div 标签 ， 并 设 
置 其 CSS 样式 的 “font-size”、“color”、“text-align” 和 “margin-right” 分 别 为 “10px”、 
“#FFF”、“right” 和 “150px”。 
俩 返回 网 页 中 ， 在 “topnav”Div 标签 中 输入 文本 “主页 | 登录 | 广告 | 联系 我 们 | 在 
这 里 留言 使 文本 在 “topbg”Div 标签 中 显示 ， 其 效果 如 图 17-15 所 示 。 
EE 
图 17-15 ”查看 添加 文本 后 的 效果 


图 将 鼠标 光标 定位 在 id 为 “mainmenu” 的 Div 标签 中 ， 选 择 【插入 】〗】/【 表 格 】 命 令 ， 
在 打开 的 对 话 框 中 设置 插入 一 个 1 行 5 列 ， 宽 为 “660px”， 边 框 粗细 、 单 元 格 边 距 
和 单元 格 间距 都 为 “0” 的 表格 ， 如 图 17-16 所 示 。 

俩 单 击 E 王 滞 按 钮 ,返回 网 页 中 将 鼠标 光标 定位 在 第 1 个 单元 格 中 , 选择 【插入 】 代 图 
像 〗 命 令 ， 在 打开 的 对 话 框 中 选择 插入 的 图 片 “menu01.gif”， 单 击 蕊 右 按 钮 ， 如 
图 17-17 所 示 。 

俩 在 打开 的 提示 对 话 框 中 单 击 EEBEG 按 钮 ， 完 成 图 像 的 插入 。 返 回 网 页 中 即 可 看 到 播 
入 的 图 像 。 


CO 
Co 
CD 


直接 在 Div 标签 中 设置 其 背景 图 像 后 ,用 户 无 法 在 设计 界面 中 选中 该 图 像 ， 只 能 通过 CSS 代码 
进行 修改 。 
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2 ue 下 和 半 3 


ED -Op 图 本 和 


四 多 x | | 
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ea Ime hel 
定义 中 下 Hi 的 id 得 二 


到 ] 04| 单 击 [em | ne 
图 17-16 插入 表格 图 17-17 插入 图 像 
俩 将 鼠标 光标 定位 在 第 2 个 单元 格 中 ， 选 择 【插入 】〗/【 图 像 对 象 〗/【 鼠 标 经 过 图 像 了 
命令 ， 打 开 “ 插 入 鼠标 经 过 图 像 ” 对 话 框 。 在 “原始 图 像 ” 和 “鼠标 经 过 图 像 ”文本 
框 中 输入 图 像 的 路 径 ， 单 击 EBD 按钮 ， 如 图 17-18 所 示 。 
俩 使 用 相同 的 方法 ， 在 剩余 的 单元 格 中 分 别 插入 鼠标 经 过 图 像 ， 并 设置 原始 图 像 为 
“menu03.gif”"、“menu04.gif? 和 “menu05.gif”; 和 鼠标 经 过 图 像 为 “menu03h.gif”、 
“menu04h.gif” 和 “menu05h.gif"， 完 成 导航 的 制作 ， 其 效果 如 图 17-19 所 示 。 


机 信者 作 Taae5 


a Ne 


17-18 添加 鼠标 经 过 图 像 图 17-19 查看 网 页 头 部 的 效果 


17.4.4 ”制作 网 页 主体 


下 面 将 制作 网 页 的 主要 内 容 部 分 ， 分 别 在 “left"、“main” 和 “rightnav”Div 标签 中 
添加 内 容 。 其 操作 步骤 如 下 : 


由 
(ye 光盘 \ 实 例 演示 \ 第 17 章 \ 制 作 网 页 主体 > 


国 为 “left” 标签 的 CSS 样式 添加 “background-image” 和 “background-repeat” 样 
式 , 其 属性 值 分 别 为 “index_leftbg.gif” 和 “no-repeat”, 然后 将 鼠标 光标 定位 在 “left” 
Div 标签 中 ， 在 其 中 插入 一 个 id 为 “leftnav” 的 Div 标签 ， 并 设置 其 CSS 样式 ， 如 
图 17-20 所 示 。 


插入 饼 标 经 过 图 像 时 ， 需 在 “插入 鼠标 经 过 图 像 ” 对 话 框 中 为 每 一 个 图 像 修改 “图 像 名 称 ”， 
否则 其 效果 将 不 能 对 应 。 


的 class 值 为 “listnav”， 其 源 代 码 如 图 17-22 所 示 。 


Flerr 
background-image: 
url (images/index leftbg.gif); 


width: 100%; 


height: 696px; float: left: 
height: 17S5px; 
wi 


width: 245px; 
background-repeat: no-repeat; 
float: left; 


#leftnav 
height: 100%; 
width: 203px; 


height: 155pxy 
width: 100%; 
margin-borton: 10px: 
background-inage: 
rl (1mages/L_ 1mg2.915); 


margin-right: 22px; 
margin-left: 20px; 


图 17-20 “leftnav” 标 签 。 图 17-21 设置 CSS 样式 

俩 切换 到 CSS 样式 表 中 , 在 其 中 添加 对 应 的 CSS 样式 
色 并 为 其 添加 背景 色 ; 取消 列表 前 默认 的 小 圆 点 ， 并 
式 如 图 17-23 所 示 。 


"rawms | 


| 
| 


辆 将 鼠标 光标 定位 在 “leftnav”Div 标签 中 ， 在 其 中 添加 id 为 “navtitle”、“navmenu” 
和 “navcontat” 的 Div 标签 ， 并 设置 其 CSS 样式 ， 如 图 17-21 所 示 。 

俩 返回 网 页 中 即 可 看 到 设置 CSS 样式 后 的 效果 ， 然 后 将 鼠标 光标 定位 在 “navmenu” 
Div 标签 中 ， 在 其 中 添加 一 个 ul 列表， 设置 其 第 1 个 目的 id 值 为 “listtitle”， 其 余 i 


lv 1d-"navmenu"y> 

<oa> 

<li id="listtitle"> 植 物 信息 </1i> 
="1istnav"> 植 物产 品 </11> 
="1istnav"> 园 艺 资料 </11> 
="1istnav"> 植 物 收藏 </11> 

<11 class="listnav"> 行 业 人 才 </11> 

<1i class="listnav"> 行 业 服务 </1i1> 

</ul> 

</aiv> 


图 17-22 添加 列表 
， 使 第 一 个 列表 的 文本 显示 为 白 
为 其 设置 背景 图 片 。 其 CSS 样 


将 鼠标 光标 定位 在 “navcontent”Div 标签 中 , 在 其 中 插入 两 个 class 名 称 为 “navtime” 
的 Div 标签 ， 并 设置 其 CSS 样式 的 “float”"、“margin-bottom” 和 “width” 分 别 为 


“left”、 “5px” 和 “203px”。 


园 在 第 1 个 “navtime”Div 标签 中 插入 一 个 4 行 3 列 的 表格 ， 然 后 合并 第 1 列 ， 设 置 


其 宽度 为 “38”; 合并 第 1 行 ， 设置 其 高 度 为 “34”， 


图 17-24 所 示 。 


并 在 其 中 输入 文本 ， 其 效果 如 


国 在 CSS 样式 表 中 新 建 class 为 “tdtitle” 和 “tdcontent” 的 类 CSS 样式 , 其 CSS 代 


码 如 图 17-25 所 示 。 


UT IISEETETE 


fonc-family: "方正 准 图 简体 "; 


font-size: 14px; 


font-weight: bold; 
color: #FFF; 
background-color:#9db350; 


ul .listnav 
font-family: "方正 准 圆 简体"; 
font-size: 14px; 
color: #2a211a; 


日 
日 


#navmenu ul 131 
list-style-image: 
url (images/navlist .gif); 
line-height:24px; 


rn 


tle 
font-family: "方正 准 图 简体 "; 


font-size: 14px; 
color: #FFF; 


.tdcontent 
font-family: "宋体 "; 
font-size: 10px; 
color:#d95479; 


17-23 ”设置 列表 的 CSS 样式 图 17-24 添加 表格 17-25 设置 表格 的 CSS 样式 


在 通过 对 话 框 新 建 CSS 样式 时 ， 如 果 “font-family” 下 拉 列 
添加 后 再 选择 。 


表 框 中 没有 需要 的 字体 ， 需 要 进行 


Pr 


CO 
CD 
a 
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国 在 网 页 的 设计 视图 中 选择 表格 中 的 第 一 行 , 在 其 上 单 击 鼠 标 右键 , 在 弹出 的 快捷 菜单 
中 选择 [CSS 样式 IL tdtitle 命令 ,为 其 应 用 tdtitle 样式 ,并 为 第 2~4 行 应 用 tdcontent 
样式 。 

全 使 用 相同 的 方法 为 第 2 个 “navtime”Div 标签 添加 表格 、 文 本 并 应 用 样式 ， 其 效果 
如 图 17-26 所 示 。 完 成 网 页 主体 左 侧 内 容 的 设置 。 

鲍 关 鼠标 光标 定位 在 “maincontent”Div 标签 中 , 在 CSS 样式 文件 中 为 “maincontent” 
样式 添加 “background-image” 和 “background-repeat” 样式 ， 其 属性 值 分 别 为 
“url(images/index_29.gif)” 和 “no-repeat”. 

在 “maincontent”Div 标签 中 插入 id 名 称 为 “contentlist”、“contph” 和 “contentinf” 

” ”的 Div 标签， 并 分 别 设置 其 CSS 样式 ， 如 图 17-27 所 示 。 

国 涤 刀 标 光标 定位 在 “contentlist”Div 标签 中 ， 在 其 中 添加 class 名 称 为 “leftlist” 的 
Div 标签 ， 并 在 “leftlist”Div 标签 中 插入 两 个 class 名 称 为 “photolist” 和 “list” 的 
Div 标 签 ， 并 分 别 在 其 中 添加 一 张 图 片 和 ul 列表， 其 源 代码 如 图 17-28 所 示 。 


17-27 设置 CSS 样式 图 17-28 添加 源 代码 
园 切 揪 到 CSS 样式 表 文件 ， 为 其 添加 对 应 的 CSS 样式 ， 其 代码 如 图 17-29 所 示 。 
轩 完 后 后 复制 “leftlist”Div 标签 中 所 包含 的 内 容 ， 在 该 标签 后 进行 粘贴 ， 并 修改 复制 
后 的 标签 中 的 图 片 和 文本 ， 其 效果 如 图 17-30 所 示 。 


17-29 添加 CSS 代码 17-30 查看 复制 标签 后 的 效果 


例 闪 妇 标 光标 定位 在 contph 标签 中 ， 在 其 中 插入 id 名 称 为 “phtitle”、“phimg” 和 和 
“phcont” 的 Div 标签 ， 并 设置 其 CSS 样式 ， 如 图 17-31 所 示 。 


当 网 页 中 存在 结构 基本 相同 的 部 分 时 ， 可 先 制作 第 1 个 样式 ， 再 通过 复制 和 粘贴 的 方法 制作 第 
2 个 或 第 3 个 样式 ， 然 后 修改 其 中 不 同 的 部 分 即 可 。 


国 去 phtitle 和 phcont 标签 中 输入 文本 ,在 phimg 标签 中 插入 imglist 标签 , 并 在 imglist 
”标签 中 谋 套 class 名 称 为 “imgstyle” 和 “imgtitle” 的 Div 标签 ， 再 设置 其 对 应 的 
CSS 样式 ， 如 图 17-32 所 示 。 


margin-lert: 20px exralagnt cenrer; 


图 17-31 设置 页 面 图 17-32 设置 布局 


人 园 完 成 后 返回 网 页 ， 在 “imgstyle” 和 “imgtitle”Div 标签 中 添加 图 像 和 文本 ， 然 后 复 
” 制 并 粘贴 4 个 “imglist” Div 标签 , 修改 其 中 的 图 像 和 文本 ， 其 效果 如 图 17-33 所 示 。 


Qiate Plant: rT 


图 17-33 ”查看 效果 


国 使 用 与 设置 前 面 两 个 Div 标签 相同 的 方法 ， 设 置 “contentinf”Div 标签 ， 在 其 中 讷 套 
class 名 称 为 “leftcontent” 和 “rightcontent” 的 Div 标签 ， 分 别 设置 其 CSS 样式 ， 
如 图 17-34 所 示 。 

国 在 “leftcontent”Div 标签 中 嵌 套 class 名 称 为 “act” 的 Div 标签 ， 并 在 act 标签 中 
庶 套 “acttitle” 和 “actcont”Div 标签 ， 并 分 别 设置 其 CSS 样式 ， 如 图 17-35 所 示 。 

团 在 acttitle 标签 中 输入 文本 ， 在 actcont 标签 中 插入 图 像 并 输入 文本 ， 然 后 为 其 图 像 
定义 CSS 样式 ， 如 图 17-36 所 示 。 


< act .actcont 【 
height: 136px; font-size; 11px; 
wideh: 100%; color:#C93; 

margin-top: 10px: margin-top: Spx; height: 110px; 

margin-left: 20px; margin-bottom: Spx; A 


floac: left; 
width: 100$; 


font-size: 12px; 
conrent 1 font-weight: bold; 
loat: right; color: #998151; 
height: 300px; float: left; margin-right: Spx; 


width: 130px; margin-bottom: 10px; 
margin-top: 10px; height: 15px; 
margin-right: 20px; wideh: 100%; 


margin-bottom: 2px; 
margin-left: 2px; 


图 17-34 设置 嵌 套 的 CSS 样式 图 17-35 设置 act 中 的 样式 17-36 定义 文本 和 图 像样 式 


人 -用 wd 国 … 


使 用 复制 粘贴 的 方法 布局 相似 的 页 面 结构 时 , 需 将 Div 标签 设置 为 class 类 型 ,而 不 是 ID 类 型 。 


"rawms | 


rp 
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国 完 成 后 在 “leftcontent”Div 标签 中 再 粘贴 一 个 act 标签 ， 然 后 修改 其 中 的 图 像 和 文 
本 ， 其 最 终 效果 如 图 17-37 所 示 。 

鲍 使 用 相同 的 方法 ， 在 “rightcontent”Div 标签 中 添加 “acttitle” 和 “actimg”Div 标 

”。” 签 , 并 设置 actimg 标签 中 img 的 CSS 样式 的 “float”、“margin-top”、“margin-left”、 
“border” 和 “border-color” 的 值 分 别 为 “left”、“3px”、“3px”、“solid” 和 “#C93”。 
完成 后 的 效果 如 图 17-38 所 示 。 


17-37 预览 字幕 文件 的 运动 效果 图 图 17-38 查看 效果 
国 使 用 相同 的 方法 , 在 右 侧 的 “rightnav” Div 标签 中 添加 navh3 和 h3 标签 , 其 源 代码 、 
CSS 样式 和 应 用 后 的 效果 分 别 如 图 17-39~ 图 17-41 所 示 。 


快速 导航 菜单 


<div id="rightnav"> 
<div id="navh3"> 


<h3 > 地 理 位 置 </h3> 


<h3 > 护理 咨询 </h3> in-cop:40Px: 
<h3> 地 理 位 置 </h3> mnavh3 h3 { 
<h3> 园 艺 材料 </h3> margin-left:20px; 
<h3> 行 业 新 闻 </h3> color: #988259; 

</div> 

</div> 


图 17-39 源 代码 图 17-40 ”CSS 代码 图 17-41 查看 效果 


17.4.5 ”制作 页 脚 内 容 


下 面 将 在 网 页 底部 的 “foot”Div 标签 中 添加 并 定位 每 部 分 的 位 置 和 内 容 , 使 其 显示 网 
页 的 相关 信息 。 其 操作 步骤 如 下 : 


1 


见 
(ye 光盘 \ 实 例 演 示 \ 第 17 章 \ 制 作 页 脚 内 容 > 


ee 
S| 


国 玫 


除 “foot”Div 标签 中 的 文本 ,在 其 中 谋 大 id 名称 为 


“footloge”、“footline” 和 “footinf” 


的 Div 标签 ， 并 分 别 设置 其 CSS 样式， 如 图 17-42 所 示 。 
国 在 “fontinf” Div 标签 中 岩 大 id 名 称 为 “inf1” 和 “inf2” 的 Div 标签 ， 并 分 别 设置 其 
CSS 样式 ， 如 图 17-43 所 示 。 


入 


655T55e 


background-image: url(images/blogo.gif); 
background-repeat: no-repeat; 

height: 85px; 

width: 233px; 

float: left; 


background-image: url(images/index 23.gif); 
float: left; 
height: 85px; 
width: Sipx; 


float: left; 
height: B85px; 
width: 740px; 
background-image: url(images/index 24.gif); 


#inf1 { 


#inf2 


margin-top: 20px; 
margin-bottom: 10px; 
margin-left: 30px; 
font-size: 12px; 
font-weight: bold; 
color: #9A8354; 


margin-left: 30px; 
font-size: 12px; 
color: #9A8354; 


图 17-42 CSS 样 式 1 图 17-43 CSS 样式 2 
国 完 成 后 在 inf1 和 inf2 标签 中 分 别 输入 文本 ， 其 效果 如 图 17-44 所 示 。 


MO omePen 


良 私 权 政策 | 服务 匠 款 | 招聘 | P 法 地 四 


全 于 联系 电话 :0 ee 6637 电子 邮 福 1 happttemertrBlt3coom 
版 权 所 有 【e) 3883 Qiate Plant 侵权 公 


图 17-44 查看 页 脚 内 容 
国 完 成 后 保存 网 页 和 CSS 文件 并 在 浏览 器 中 预览 效果 。 


17.5 “拓展 练习 


为 了 使 用 户 对 网 页 制作 的 过 程 更 加 熟悉 ， 下 面 将 通过 本 章 中 制作 的 
“index.html” 网 页 为 例 ， 在 其 基础 上 制作 其 他 的 网 页 。 如 本 练习 中 的 “ 植 
物 图 集 ” 和 “植物 知识 ”网 页 。 


17:.9;1 


制作 植物 图 集 网 页 


本 练习 先 对 本 章 制作 的 “index.html” 网 页 进行 编辑 ， 对 网 页 头 部 中 的 导航 条 设置 超级 
链接 ， 并 将 其 另存 为 模板 ， 再 将 页 面 中 间 的 内 容 设置 为 可 编辑 区 域 ， 并 在 其 基础 上 新 建 
“photo.html” 网 页 。 该 网 页 主要 用 于 显示 植物 的 图 片 ， 可 通过 Div+CSS 对 页 面 进行 划分 ， 
再 在 其 中 添加 图 片 和 说 明文 字 ， 其 效果 如 图 17-45 所 示 。 


-用 Wd 国 … 


要 制作 一 个 网 站 ， 可 先 制作 其 首页 ， 然 后 将 首页 另存 为 模板 ， 在 此 基础 上 制作 其 他 的 页 面 。 
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图 17-45 植物 图 集 网 页 效果 


光盘 \ 素 材 \ 第 17 章 \plant\photo、index.html 
参 刚 。” 光盘 \ 效 果 \ 第 17 章 \plant\photo.html 
写意” 光盘 \ 实 例 演示 \ 第 17 章 \ 制 作 植物 图 集 网 页 > 


该 练习 的 操作 思路 与 关键 提示 如 下 。 


. 


TY 路 : 
新 建 基 手 模板 的 页 面 @ 
ci) 
关键 提示 : 


制作 本 例 时 ， 需 新 建 一 个 “photo.css” 层 痉 样 式 表 ， 将 “photo.html” 网 页 中 新 建 的 CSS 
样式 存储 到 其 中 ， 以 便于 以 后 对 页 面 进行 修改 和 编辑 。 


340 
新 建 一 个 CSS 样式 文件 的 目的 在 于 与 模板 文件 中 的 CSS 样式 进行 区 分 ,便于 网 站 的 后 期 编辑 


和 修改 。 


加 时 | 


17.5.2 ”制作 植物 知识 网 页 


使 用 与 制作 植物 图 集 网 页 类 似 的 方法 , 制作 植物 知识 网 页 , 使 网 页 中 显示 植物 的 信息 。 
该 网 页 主要 以 文字 和 图 片 的 混 排 为 主 ， 其 效果 如 图 17-46 所 示 。 


和 


人 


图 17-46 植物 图 集 网 页 效果 


光盘 \ 素 材 \ 第 17 章 \plant\knowlage、index.html 


刚 、 光 盘 \ 效 果 \ 第 17 章 \plant\knowlage.html 
志和 9E 盘 ”光盘 \ 实 例 演示 \ 第 17 章 \ 制 作 植物 知识 网 页 > 


该 练习 的 操作 思路 如 下 。 


BE 


Lr 


“植物 知识 ”网 页 的 制作 方法 与 “植物 图 集 ” 网 页 的 制作 方法 类 似 ， 也 需要 新 建 一 个 CSS 样式 
文件 ， 这 里 新 建 为 “know.css”。 


第 18 童 。。 


制作 汽车 世界 网 站 


配置 服务 器 
发 布 站 点 


制作 主 内 容 页 面 3 
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本 章 将 综合 运用 本 书 所 学 的 知识 ， 制 作 一 个 汽车 世界 
网 站 。 在 该 网 站 中 将 通过 Div+CSS 对 页 面 进 行 布 局 ， 并 通 
过 <iframe> 标 签 对 页 面 进行 组 合 ， 使 用 户 在 掌握 Div+CSS 
布局 的 同时 ， 也 熟悉 框架 布局 的 使 用 方法 。 在 制作 本 例 的 
过 程 中 ,将 运用 本 书 所 学 的 一 些 知识 ,如 创建 站 点 、Div+CSS 
布局 和 框架 布局 等 。 
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全 "ues | 到 | 


a ee 


18.1 ”实例 说 明 


本 章 将 制作 一 个 汽车 世界 网 站 , 使 其 给 出 汽车 的 信息 。 该 网 站 采用 深 色调 ， 
以 紫色 、 黑 色 和 白色 为 主 , 显示 网 站 中 的 信息 。 如 图 18-1 所 示 为 汽车 世界 
网 站 的 首页 。 


车 之 家 计 场 动态 动感 术 频 ”时事 新 闻 。 病 国 也 沽 ”在线 论坛 


日 体 点 人 新 闻 
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图 18-1 汽车 世界 网 站 效果 


四 见 ， 光 盘 \ 素 材 \ 第 18 章 \car 
[光盘 光盘 \ 效 果 \ 第 18 章 \car\index.html > 


本 网 站 是 一 个 中 小 型 网 站 ， 由 于 内 容 比 较 多 ， 其 制作 过 程 要 稍微 复杂 一 些 。 


| WEB) wr one cso mres mts of 入 


18.2 行业 分 析 


汽车 世界 网 站 是 一 个 小 型 的 商业 网 站 ， 这 里 只 节选 了 部 分 栏目 来 进行 制 
作 。 为 了 使 用 户 对 网 站 的 制作 更 为 清晰 ， 下 面 将 对 本 例 进行 分 析 。 


本 例 将 只 选取 网 站 中 的 首页 来 进行 制作 ， 用 户 只 需 掌 握 网 站 的 制作 方法 即 可 。 在 制作 
这 种 小 型 商业 网 站 时 ， 需 要 注意 以 下 几 个 方面 : 
统一 网 站 的 整体 风格 ， 如 本 例 将 采用 相同 的 色彩 、 相 似 的 框架 进行 布局 ， 使 其 每 个 页 
面 顶 部 及 底部 都 保持 一 致 ， 只 有 中 间 部 分 与 栏目 的 内 容 直 接 相 关 ， 因 此 才 会 有 变化 。 
确定 网 站 需要 表达 的 情感 。 本 例 将 体现 神秘 、 高 贵 的 情感 ， 因 此 采用 了 紫色 和 黑色 
的 色彩 搭配 方案 。 
为 了 防止 网 页 中 的 内 容 过 多 , 可 将 页 面 的 各 个 部 分 单独 制作 为 一 些小 页 面 , 最 后 再 
通过 <iframe> 标 签 将 其 组 合 在 一 起 。 
由 于 该 网 站 具有 一 定 的 商业 性 ,因此 需要 建立 动态 站 点 ,并 将 制作 完成 的 网 页 上 传 
到 服务 器 中 。 
本 例 与 制作 一 般 的 网 页 不 同 的 是 , 通过 采用 iframe 框架 来 进行 浮动 布局 , 它 更 加 简单 ， 
适合 用 于 制作 内 容 较 多 且 页 面 较为 规范 的 网 页 。 并 且 在 进行 页 面 布 局 时 ， 最 好 将 每 部 分 的 
高 度 设置 为 自 适应 ， 以 便于 内 容 的 填充 和 页 面 的 自动 变化 。 


18.3 ”操作 思路 


网 站 规划 、 素 材 收集 、 页 面 效果 图 制作 等 工作 完成 后 ， 在 本 地 电脑 中 创建 
一 个 本 地 站 点 文件 夹 “car"， 并 将 相应 的 素材 复制 到 该 文件 夹 中 ， 接 下 来 
就 可 以 开始 网 页 的 制作 了 。 


为 更 快 完成 本 例 的 制作 ， 并 尽 可 能 运用 本 书 讲解 的 知识 ， 本 例 的 操作 思路 如 下 。 
BE 


<iframe> 标 签 是 一 种 类 似 于 框架 功能 的 标签 ， 它 可 以 直接 将 已 有 的 网 页 包含 在 当前 网 页 中 ， 可 
通过 选择 【插入 〗/【HTML]/【 框 架 〗/【IFRAME] 命令 或 “标签 选择 器 ”对 话 框 来 进行 添加 。 


名 | 


18.4 操作 步骤 


本 例 的 制作 主要 分 为 制作 网 页 头 部 、 网 页 主体 和 网 页 底部 3 部 分 ， 完 成 后 
再 将 其 组 合 起 来 ， 但 在 进行 页 面 的 制作 前 需 先 配置 站 点 文件 。 


18.4.1 创建 站 点 并 配置 远程 服务 器 
下 面 将 新 建 “car” 站 点 ， 并 为 其 配置 远程 服务 器 。 其 操作 步骤 如 下 


上 见 
人 2 光盘 \ 实 例 演示 \ 第 18 章 \ 创 建站 点 并 配置 远程 服务 器 > 


国语 动 Dreamweaver CS6， 选择 【站 点 〗/【 新 建站 点 】 命 令 ， 在 打开 对 话 框 的 “站 点 
名 称 ” 文 本 框 中 输入 “car”， 在 “本 地 站 点 文件 夹 ”文本 框 中 设置 文件 的 根 目 录 ， 如 
图 18-2 所 示 。 

人 图 选 择 “ 服 务 器 “选项 卡 ， 在 右 侧 单 击 “ 添 加 新 服务 器 ”按钮 [中 ， 在 打开 的 对 话 框 中 
设置 “服务 器 名 称 ”为 “car”,“ 连 接 方法 ”为 “FTP”, 再 设置 其 他 参数 , 单 击 ERE 
按钮 进行 测试 ， 如 图 18-3 所 示 。 


记 画 二 Es Eu 忆 i 
图 18-2 创建 站 点 图 18-3 测试 连接 服务 器 
全 测试 成 功 后 依次 单 击 EEmE 本 和 ee rp 
EI 拉 钮 ， 汉 回 “ 服 务 器 ” Pe 
选项 卡 界面 ,此 时 可 在 其 中 看 到 


钮 完成 设置 ， 如 图 18-4 所 示 。 
返回 Dreamweaver CS6 中 打开 | 
的 “文件 夹 ” 面 板 。 [05| 单 击 ] 


Em CEI 


18-4 查看 新 建 的 服务 器 


0 -国电 df 国 


设置 FTP 服务 器 需要 先 申请 FTP 免费 空间 ,根据 获得 的 网 址 ,用户 名 和 密码 进行 服务 器 的 配置 。 


新 建 的 服务 器 ， 单 击 [ES 过 | aaa 
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18.4.2 ”创建 页 面 顶部 


下 面 将 先 制作 项 部 页 面 “top.html"， 其 制作 方法 很 简单 ， 主 要 是 创建 Logo 和 导航 条 。 
其 操作 步骤 如 下 : 


见 
ez 光盘 \ 实 例 演示 \ 第 18 章 \ 创 建 页 面 项 部 > 


国 新 建 “top.html” 空 白 网 页 文件 和 “style.css” 层 释 样 式 表 文 件 ， 并 将 “style.css” 
链接 到 “top.html” 网 页 中 。 

国 打 开 “CSS 样式 ”面板 ， 单 击 “ 新 建 CSS 规则 ”按钮 加 打开 “新 建 CSS 规则 ” 
对 话 框 。 在 “选择 器 类 型 ”下 拉 列 表 框 中 选择 “标签 ”选项 ， 在 “选择 器 名 称 ” 下 拉 
列表 框 中 选择 “body” 选 项 ， 单 击 ESE 滞 按钮， 如 图 18-5 所 示 。 

国 在 打开 对 话 框 的 “类 型 ”选项 卡 中 设置 “font-size” 的 值 为 “12”"， 然 后 选择 “ 方 框 ” 


选项 卡 ， 在 “Margin” 栏 的 “Top” 下 拉 列 表 框 中 输入 “0”， 单 击 匡 台 本 按钮， 如 
图 18-6 所 示 。 
新 于 CS 规则 [三 body 的 555 巴 刚 去 多 I 苞 汤 
Ne A Ta -= 器 和 
Mn 
EE 
TA RE 
规 刚 定义 : 
渤 择 定义 规 m0 的 位置。 
[| ED 
图 18-5 创建 文件 图 18-6 创建 样式 


俩 使 用 相同 的 方法 ， 为 网 页 新 建 “a:link”、“a:visited” 和 “a:hover” 的 CSS 样式 ， 并 
设置 其 属性 ， 如 图 18-7 所 示 。 

国 先 择 【 插 入 】/【 布 局 对 象 】/ 【Div 标签 〗 命 令 ， 新 建 一 个 ID 名 称 为 “top” 的 Div 
标签 ， 并 设置 其 CSS 样式 ， 如 图 18-8 所 示 。 

园 在 “top”Div 标签 中 谱 套 一 个 ID 名 称 为 “logo” 的 Div 标签 ， 并 设置 其 CSS 样式 ， 
如 图 18-9 所 示 。 


background-inage: 


height: 308px 


width: 1002px 
float:left 


346 


也 可 以 直接 在 “style.css” 样 式 表 文件 中 输入 需要 定义 的 CSS 样式 属性 来 完成 样式 的 设置 。 


"es || 


国 在 “logo”Div 标 签 中 插入 “logo.gif?” 图片， 为 其 设置 链接 为 “default.html”， 并 设 
置 其 “alt” 属 性 为 “汽车 世界 ， 汽 车 之 家 ”。 

国 在 “logo”Div 标签 后 插入 一 个 ID 名 称 为 “top_marquee” 的 Div 标签 ， 并 设置 其 
CSS 样式 ， 如 图 18-10 所 示 。 

在 “top_marquee”Div 标签 中 插入 一 个 <marquee> 标 签 ,设置 其 <behavior” 为 “alternate”， 
“scrolldelay” 为 “1”,“scrollamount” 为 “1”， 并 在 其 中 输入 文本 “汽车 世界 ， 汽 车 
Re en 
完成 后 在 “top”Div 标签 后 插入 一 个 ID 名 称 为 “daohang” 的 Div 标签 ， 并 设置 其 
CSS 样式 ， 如 图 18-12 所 示 。 


height 


font -size; Lzpx 
color: #PFEFFF 有 此 


图 18-10 设置 标签 样式 18-11 设置 标签 属性 ”图 18-12 设置 daohang 样式 
四 吉 除 “daohang” 的 Div 标签 中 的 文本 ， 并 在 其 中 插入 图 像 “daohang.jpg”"， 再 为 各 
菜单 创建 矩形 热 区 和 创建 链接 ， 完 成 后 的 效果 如 图 18-13 所 示 。 
RE ED 
图 18-13 创建 图 像 链接 
国保 存 网 页 并 预览 ， 其 效果 如 图 18-14 所 示 。 


汪 之 家 赛场 动态 ”动感 术 频 时 训 新 闻 。 闻 国 砍 浴 在 线 论坛 


图 18-14 ”顶部 网 页 “top.html” 的 预览 效果 


18.4.3 ”制作 网 页 底部 


接 下 来 制作 网 页 底部 “bottom.html”， 这 部 分 也 较 简单 ， 主 要 是 创建 “bottom” 和 
“copyright”Div 标签 。 其 操作 步骤 如 下 : 


Geoecaew “用 忆 村 国 -- 


网 页 底部 的 制作 方法 很 简单 ， 只 需要 定位 其 位 置 ， ee ep 


-8 
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4 见 


国 新 建 “bottom.html” 空 白 网 页 文件 ， 并 将 “style.css” 链 接 到 该 网 页 中 。 然 后 插入 
ID 名 称 为 “bottom” 的 Div 标签 ， 并 删除 标签 中 的 内 容 ， 定 义 其 CSS 样式。 

锅 将 鼠标 光标 定位 在 “bottom”Div 标签 中 , 插入 “copyright”Div 标签 ， 并 定义 其 CSS 
样式 ， 如 图 18-15 所 示 。 

俩 将 鼠标 光标 定位 在 “copyright” Div 标签 中 , 删除 其 中 的 内 容 , 并 输入 文本 “Copyright 
2012-2015 汽车 世界 All rights reserved.”。 保 存 网 页 ， 预 览 效果 如 图 18-16 所 示 。 


ma :160px 
color:#F3c600 


图 18-15 定义 Div 标签 样式 图 18-16 预览 效果 


18.4.4 制作 主 内 容 页 面 


主 内 容 页 面 “main.html” 的 制作 相对 复杂 一 些 ， 主 要 是 在 创建 Div 标签 时 样式 的 定义 
较 困 难 。 整 个 页 面 主要 分 为 左右 两 部 分 ， 下 面 先 来 制作 左 侧 部 分 。 


1 见 
(es 光盘 \ 实 例 演示 \ 第 18 章 \ 制 作 主 内 容 页 面 > 


1. 制作 页 面 左 侧 


制作 页 面 左 侧 的 操作 步骤 如 下 : 

国 新 建 空白 网 页 并 保存 为 “main.html”"， 然 后 将 外 部 样式 表 文 件 “style.css” 链 接 到 页 
面 中 。 插 入 “main”Div 标签 ， 其 样式 定义 如 图 18-17 所 示 。 

俩 出 除 标 签 中 的 内 容 ， 并 将 鼠标 光标 定位 在 其 中 ,插入 “left”Div 标签 ， 其 样式 定义 如 
图 18-18 所 示 。 

国清 除 “left”Div 标签 中 的 内 容 ， 并 将 鼠标 光标 定位 在 其 中 ， 插 入 “I1”Div 标签 ， 其 
样式 定义 如 图 18-19 所 示 。 


页 面 左 侧 主 要 用 于 分 栏 显示 内 容 ， 分 为 今日 焦点 、 文 章 列表 和 赛场 动态 3 部 分 


加 Em | 


俩 清除“I1”Div 标签 中 的 内 容 ， 并 将 鼠标 光标 定位 在 其 中 ， 插 入 “11_1”Div 标签 ， 其 
样式 定义 如 图 18-20 所 示 。 

清除 “I1_1”Div 标签 中 的 内 容 ,在 标签 的 源 代码 中 输入 “<script language="javascript" 
type="text/javascript”src="js/flash_img.js">”。 然 后 将 鼠标 光标 定位 在 “Il1_1”Div 
标签 后 ， 插 入 “I1_2”Div 标签 ， 其 样式 定义 如 图 18-21 所 示 。 

园 清 除 “I1_2”Div 标签 中 的 内 容 ， 并 将 鼠标 光标 定位 在 其 中 ， 输 入 项 目 列表 文本 ， 如 
图 18-22 所 示 。 
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height: 185px 
width: 336px 
nargin-top: 65px 
margin-right: 24px 
margin-botton: auto 
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图 18-20 定义 “1l1_1” 标 签 ” 图 18-21 定义 “Il1_2” 标 签 图 18-22 输入 列表 文本 


俩 将 鼠标 光标 定位 在 项 目 列表 前 级 符号 后 ， 新 建 一 个 class 名 称 为 “li” 的 CSS 样式 ， 
并 设置 其 “list-style-type” 属 性 为 “none”，“line-height” 属 性 为 “23px”。 

园 完 成 后 将 鼠标 光标 定位 在 “I1”Div 标签 后 ， 使 用 相同 的 方法 插入 “I2”Div 标签 ， 并 
在 其 中 插入 “Il2_1” Div 标签 ， 其 CSS 定义 如 图 18-23 所 示 。 

俩 清除 “I2_1”Div 标签 中 的 内 容 ， 在 其 中 输入 项 目 列表 文本 并 创建 超级 链接 ， 其 效果 
如 图 18-24 所 示 。 

鲍 将 刀 标 光标 定位 在 项 目 列表 前 级 符号 后 ， 为 列表 标签 <li> 创 建 样式 ， 然 后 将 鼠标 光标 
定位 在 “I2_1”Div 标签 后 ， 插 入 “Il2_2”Div 标签 ， 其 CSS 定义 如 图 18-25 所 示 。 

-nain .left .12 .12 11i1{ 


list-style-position: outside 
list-style-type: square 


.main .left .12 .12.2 { 
float: left 
height: 170px 


width: 276px 
margin-top: 40px 
nargin-right: auto 
margin-botton; auto 
margin-left: 100px 


18-23 定义 “12_1” 标 签 图 18-24 创建 文本 列表 图 18-25 定义 <li> 和 “12_2” 标 签 


人 国 清除 标签 中 的 内 容 ， 并 插入 站 点 中 pic 文件 夹 中 的 图 像 “rcsh.gif"， 选 中 图像 ， 为 其 
创建 热点 区 域 链接 ， 完 成 后 的 效果 如 图 18-26 所 示 。 

例 将 鼠标 光标 定位 在 “1I2”Div 标签 后 ， 使 用 相同 的 方法 插入 “13”Div 标签 ， 并 在 其 中 
庶 套 “I3_1”Div 标签 ， 其 CSS 定义 如 图 18-27 所 示 。 

国 在 “13_1”Div 标 签 中 输入 列表 ， 其 效果 如 图 18-28 所 示 。 


代码 “<script language="javascript" type="text/javascript” src="js/flash_img.js">” 的 作用 是 链接 
外 部 JavaScript 脚本 “flash img.js”( 素材 \ 第 18 章 \car\js\flash img.js )， 这 是 一 个 动态 显示 图 像 的 
脚本 。 
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height: 14Ipx 
width: 313px 


图 18-26 插入 图 像 图 18-27 定义 标签 图 18-28 创建 文本 列表 

国定 XX“l3_1”Div 标签 中 <li> 标 签 的 CSS 样式 ， 然 后 将 鼠标 光标 定位 在 “13_1”Div 
标签 后 ， 插 入 “13_2”Div 标签 ， 并 设置 其 CSS 样式 ， 如 图 18-29 所 示 。 

人 鲍 清除 标签 中 的 内 容 ， 插 入 并 选中 图 像 “jyss.gif"， 为 其 创建 热点 区 域 链接 ， 完 成 后 的 
效果 如 图 18-30 所 示 。 

例 完成 左 侧 页面 的 制作 ， 按 “Ctrl+S” 快 捷 键 保存 网 页 。 


main .left .13 .131 11 { 
list-style-position: outside 
list-style-type: square 


-nain .left .13 .13.2 { 
float: left 
height: 170px 
width: 276px 
nargin-top: 40px 
nargin-right: auto 
nargin-botton: auto 
margin-left: 100px 


图 18-29 定义 “13_2” 标 签 图 18-30 插入 图 像 


2. 制作 页 面 右 侧 


制作 页 面 右 侧 的 操作 步骤 如 下 : 
国 打 开 “main.html” 网 页 ， 将 鼠标 光标 定位 在 “left”Div 标签 后 ， 插 入 “right”Div 
标签 ， 其 样式 定义 如 图 18-31 所 示 。 
俩 出 除 标签 中 的 内 容 ， 插 入 “r1”Div 标签 ， 其 样式 定义 如 图 18-32 所 示 。 
全 出 除 标 签 中 的 内 容 ， 并 将 鼠标 光标 定位 在 标签 后 ， 插 入 “r2”Div 标签 ， 其 样式 定义 
如 图 18-33 所 示 。 
.main .right { 


float: left 
width: 228px; 


ain .right .rl T 
background-inage: url(pic/1f_r__rl_cl. jpe) 


margin: auto; 


} l 1 
图 18-31 定义 “right” 标 签 18-32 定义 “rl” 标 签 图 18-33 定义 “r2” 标 签 


width: 228px 


国清 除 “r2”Div 标签 中 的 内 容 ， 并 将 鼠标 光标 定位 在 其 中 ， 插 入 “r2_1”Div 标签 ， 
其 样式 定义 如 图 18-34 所 示 。 
贺 出 除 “r2_1” Div 标签 中 的 内 容 , 并 将 鼠标 光标 定位 在 其 中 , 在 其 中 输入 文本 “[ 栈 


加 SE | 


赏 析 ]”。 

俩 将 鼠标 光标 定位 在 “r2_1”Div 标签 后 ， 插 入 卫生 
3 行 1 列 、 宽 度 为 165 像素 、 间 距 为 27 像素 eet 
的 表格 , 并 分 别 在 各 单元 格 中 插入 相应 的 图 像 EN 
并 创建 图 像 链接 ， 完 成 整个 “main.html” 页 pe op de 
轴 的 制作 ee 


18.4.5 制作 首页 图 18-34 定义 “r2_1” 标签 


本 节 使 用 <iframe> 标 签 将 已 制作 好 的 “top.html”、“main.html” 和 “bottom.html” 网 页 
组 合成 首页 “default.html" 。 其 操作 步骤 如 下 : 


1 见 
[Eh 光盘 \ 实 例 演示 \ 第 18 章 \ 制 作 首页 > 
启动 Dreamweaver CS6， 新 建 空白 网 页 文档 “default.html”， 并 链接 “style.css” 
样式 表 文件 。 


俩 将 其 标题 修改 为 “汽车 世界 "， 然 后 将 鼠标 光标 定位 在 <body> 标 签 后 ， 插 入 一 个 ID 
名 称 为 “default” 的 Div 标签 ， 并 设置 其 CSS 样式 ， 如 图 18-35 所 示 。 

俩 将 鼠标 光标 定位 在 “default” Div 标签 中 , 选择 【插入 ] 人 HTML]J 人 框架] 人 IFRAME] 
命令 ， 插 入 一 个 <iframe> 标 签 ， 并 设置 其 大 小 和 链接 页 面 的 属性 ， 如 图 18-36 所 示 。 

俩 使 用 相同 的 方法 插入 其 他 两 个 <iframe> 标 签 ,并 设置 其 大 小 和 链接 的 页 面 ,如 图 18-37 
所 示 。 完 成 后 保存 并 预览 首页 。 


《iframe src="main.html” name= 
“main” width="1002" marginwidth= 
“0" height="774" marginheight="0" 
scrolling="no" frameborder="0"> 
/ifrane> 


《iframe src="top.html” name="top' 《iframe src="bottom. html” name= 


#default { 


width: 1002px width="1002” marginwidt “bottom” width="1002” marginwidth=| 
margirrright: height=" 349" marginheigl 加 “0"” height="211" marginheight="0" 
margin-le’ scrolling="no” frameborde; ” scrolling="no” franeborder="0"> 


} <《/ifrane> /ifrane> 


18-35 ”定义 标签 18-36 定义 “iframe” 标 签 图 18-37 定义 其 他 标签 


18.4.6 ”发 布 站 点 


完成 网 站 的 制作 后 ， 即 可 将 站 点 发 布 到 网 络 中 ， 以 便 其 他 用 户 进行 访问 。 下 面 将 直接 
通过 Dreamweaver CS6 自 带 的 功能 进行 站 点 的 发 布 。 其 操作 步骤 如 下 : 


4 见 
es 光盘 \ 实 例 演示 \ 第 18 章 \ 发 布 站 点 > 


Co 
a 
ch 


用 户 可 以 直接 在 HTML 代码 中 添加 “iframe” 标 签 的 代码 ， 并 对 其 属性 进行 设置 。 需 要 注意 的 
是 ， 每 个 标签 的 大 小 要 与 页 面 的 大 小 一 致 ， 否 则 网 页 显示 不 完整 。 


小 
og 
和 
本 


(Ep 


| 中 文 版 Dreamweaver C56 网 页 制作 从 入 门 到 精通 G7 


俩 选择 【窗口 ] /【 文 件 】 命 令 ， 打 开 “ 文 件 ” 面 板 ， 在 其 中 可 查看 到 当前 站 点 所 包含 
的 所 有 文件 。 

俩 选择 站 点 中 需要 上 传 的 文件 ,这 里 选择 站 点 根 目录 “car"， 单 击 “文件 ”面板 中 的 “向 
“远程 服务 器 上 传 文件 ”按钮 圈 ， 如 图 18-38 所 示 。 

国 Dreamweaver CS6 将 自动 连接 FTP 服务 器 , 然后 在 打开 的 提示 对 话 框 中 单 击 臣 柄 刁 
按钮 ,开始 上 传 文件 。 此 时 ， 将 查看 到 文件 的 上 传 进度 ， 如 图 18-39 所 示 。 


已 T 载 : 070 


保 f 记 录 ] EM 


图 18-38 上 传 文件 图 18-39 查看 上 传 进度 
国 上 传 完成 后 , 单 击 “ 文 件 ”面板 中 的 “展开 以 显示 本 地 和 远 端 终点 ” 按钮 加 ,如 图 18-40 
所 示 ， 在 打开 的 窗口 中 即 可 看 到 服务 器 中 上 传 完 成 的 效果 。 


DW xun men EEW Waly | 


2D EL 文件 PIHWaD 19.1e 


Ml 二 


Se i FIN 7013/670 1013 天 大 1 [rn 


图 18-40 查看 上 传 效果 


18.5 ”拓展 练习 


为 了 使 用 户 对 该 网 站 的 制作 方法 有 进一步 的 了 解 ， 下 面 以 制作 汽车 之 家 和 
赛场 动态 网 页 为 例 ， 继 续 完成 该 网 站 的 制作 。 


18.5.1 制作 汽车 之 家 网 页 


本 练习 将 制作 汽车 之 家 网 页 ， 对 “top.html” 和 “bottom.html” 网 页 的 设置 保持 不 变 ， 
只 对 “main.html” 页 面 进行 修改 ， 将 其 划分 为 左 、 右 两 部 分 ， 并 在 左 侧 添加 文本 和 图 像 ， 


352 
在 使 用 Div 标签 进行 布局 时 ，Dreamweaver CS6 编辑 窗口 中 的 显示 效果 与 在 浏览 器 中 预览 的 效 


果 可 能 不 太一 致 ， 此 时 需要 多 次 预览 ， 并 根据 预览 效果 调整 Div 标签 的 相关 属性 。 


虱 制作 汽车 世界 网 站 
有 .ee 


在 右 侧 显 示 文 章 列 表 ， 其 效果 如 图 18-41 所 示 。 


2008 年 11 月 10 日 ， 一 汽 站 国产 全 新 税 连 & 所 正式 帮 布 ， 全 略 关 过 4 对 用 了 全 新 的 外 现 和 降生 设计 ， 在 正面 和 后 面 
让 与 加 过 45 十 分 可 惟 。 星 沿 AtL 在 奥 记 计 下 并 不 和 是 高 拉 拆 车 ， 介 是 全 新 可 这 AL 前 陀 设计 节 采 末了 与 可 涉 中 从 入 品 
机 的 耻 车 设计 交接 


描记 MLde 的 最大 忧 点 有 + 外 现 5 沿 动 路 ， 线 条 站， 闪 肇 能 工 棕 至 ， 酝 巡 不 请 ! 育 肪 允 果 趟 错 ! 空间 局 寺 实 用 , 
放送 性 不 销 ; 品格 3 并。 暴 大 污点 有 ; 向 饰 能 工 酝 绚 ， 但 渤 型 设计 没有 什么 
出 条 的 好 方 ， 导航 串 后 ,有 个 别 朵 去 反 驶 全 调 出 风口 时间 长 了 有 只 厅 丰 在 > | 
了 这 个 估量、 补 辣 、 提 拉动 和 也有 大 做， 各， En | 


丰 内 病 : 内 痢 设 放流 有 新 妓 ， 前 和 网 友 币 | 玫 但 加 基 ， 
方 条 量 和 村 守恒- 
和 2 字 间 ; 构 体 宇 同和 地 充 六， 记 榜 好 性 市 天 一 租 ， 了 评 从 “ 宇 间 四 
力 带 了 个 :还 是 不 和 的 ， 后 空 it 后妈 宗 39 帮 要 大 ， 可 以 铀 二 部 陵 ， 庄 入 
闻 透 性 一 棉 李 ”。 
人 h 朱 放 : 接 这 轩 适 ， 曾 运 动 风 税 ， 视 节 完 闻 ， 万 生生 手 硬 不 档 ; 多 
捉 地 性 久 好 ， 底 县 扎 辫 ， 通 过 性 现 下 酚 ， 守 车 妈 得 ， 蜂 音 小 ， 咎 友 个 贡 网 友 所 站 油门 了 和 运作 和 果 ， 训 和 行 东 sj 方向 


一! ML 新 了 隔 榨 全 箱 绊 色 高 邓 闪 机， 技术 失 浊 ， 纺 力 久 出 充 中 ,电化 科 ， 覃 境 夫 现 比 入 丰 可， 由 谷 
“民风 把 步 有 点 关 ， 自 jn 和 门 提速 下 简 ， 加 塌 也 相当 不 银 。 一 


01 证 虹 新 这 hu 在 外 沽 上 进行 了 区 进 ， 各 : 更 家 的 后 排 空间 ， 区间 ， 洛 出 
sx 识别 策 统 ,为 中 国有 有 到 者 量 寺 证 天 的 弛 运 庄 二 和 0 更 罗 靖 到 的 3 活 op 多 处 祯 本 直入 | 
件 * 


Xue HE 


图 18-41 汽车 之 家 网 页 效果 


和 一” 光盘 \ 实 例 演示 \ 第 18 章 \ 制 作 汽车 之 家 网 页 > 
该 练习 的 操作 思路 如 下 。 


» 


” 思路 : 


光盘 \ 素 材 \ 第 18 章 \car 
2 光盘 \ 效 果 \ 第 18 章 \car\qezj.html 


' es 


0 -用 bd 国 … 


在 使 用 Div 标签 布局 网 页 时 ， 有 时 为 了 使 页 面 的 效果 达到 理想 的 状态 ， 可 能 需要 反复 多 次 尝试 
修改 样式 中 各 属性 的 值 的 大 小 ， 如 在 定义 <li> 标 签 样式 时 ， 行 高 属性 值 的 大 小 即 要 反复 设置 后 才能 
确定 。 
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18.5.2 ”制作 赛场 动态 网 页 


使 用 与 制作 汽车 之 家 网 站 类 似 的 方法 ， 制 作 赛场 动态 网 页 ， 使 网 页 中 显示 赛场 的 最 新 
动态 ， 其 效果 如 图 18-42 所 示 。 


| 及 车 之 家 实 场 动 右 、 动 局 杭 频 靖国 砍 黄 、 在 线 论 坛 
BAwgWA99 要 场 动态 En 


泛 珠 三 角 起 级 赛车 节 2013 征 页 季 窒 于 丰 


泛 原 从 开始 以 来 ， 训 被 主义 为 平民 的 赛车 、 车 过 自己 的 赛车 。 在 宕 年 车 过 赛事 参与 度 根 少 、 回 /要 事 英 乏 的 时 代 ， 


正 是 芝 珠 高 举 平民 旗 品 ， 以 吸引 车 过 苑 与 培育 车 填 属 体 发 展 为 己任 ， 力 创 赛 进贡 雄 这 梓 的 赛事 ， 力 中 加 场地 赛车 开创 
了 一 个 称 新 的 局 面 。 而今， 当初 泛 珠 人 的 强力 已 经 得 到 了 认可 ， 现在 的 友 塌 英雄 过 组 《高 级 组 )】 的 场 坟 多 格 人 数 在 265 人 
以 上 ， 景 亲民 的 赛 道 英雄 忒 组 比赛 区 赛 人 峙 肝 本 上 孝 在 40 人 以 上 ， 本 场 更 是 达 列 了 惊人 的 4s 台 ， 观看 这 个 比 村 起 中 的 
时 候 这 些 车 将 会 排 到 一 号 变 之 后 ， 场 而 不 可 将 不 计 现 ; 而 县 守 送 英 想 的 比赛 模式 已 经 在 全 国 各 个 赛 计 场 铺 开 ， 闫 似 的 H 
赛 导出 不 方 * 


从 车 测 早上 基 
乞 革 与 你 了 办 可 窜 
0 诸 
时 中 国 泵 儿 国际 沁 五 ty 守 
8 山 站 直 事 系 有 | 
全 责 下 情 于 军 


2013 年 新 创办 ,的 所 牛 屠 从 大 客 ， 在 3 月 运 穆 专 季 赛 已 纪 升 始 赛 让 出 状 情 的 火花，10 苦 赛 丰 两 两 所 对 喇 亲 ， 在 2 万 观众 
面前 展示 肤 符 的 村 义 与 优雅 。 贴身 把 至 的 涩 列 对 抗 加 上 珊 场 珊 众 浪 济 舱 的 条 声 吸 引 了 众多 票 移 好 手 的 关注 ,本 声 比 大 
将 有 13 台 膏 车 参 奔 ， 除 了 上 场 春 事前 三 名 车 手 外 ， 这 次 更 吸引 到 黄 名 来自 日 本 的 台 物 高 手 林 水 直 登 和 2012 年 世界 种 区 大 
赛 冠军 车 于- 天 脚本 百 参 与 ， 国 内 外 季 稳 高 于 共 聚 一 室 ， 将 会 控 出 起 帮 的 火 苑 ? 


刻本 要 二 r 放 未 藉 专 志 et 


图 18-42 赛场 动态 网 页 效果 


赛场 动态 与 汽车 之 家 网 页 相似 ,在 创建 标题 样式 时 , 可 以 通过 复制 样式 “.main .left .leftl .leftl_ 
title” 为 “.main .left .leftl .left1_title 1”， 再 修改 样式 的 背景 图 像 来 完成 。 


， 光盘 \ 素 材 \ 第 18 章 \car 
加 光盘 \ 效 果 \ 第 18 章 \carvscdthtml 
NW 光盘 \ 实 例 演示 \ 第 18 章 \ 制 作 动 态 赛场 网 页 >>>>>>>> 


该 练习 的 操作 思路 如 下 。 


. 
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' FE 
HU 


按照 相同 的 方法 ， 用 户 可 以 再 进行 其 他 网 页 的 制作 ， 如 动态 视频 、 时 事 新 闻 、 酷 图 欣赏 和 在 线 
论坛 等 。 


ES 


CD 
a 
a 


第 19 章 **。 


制作 个 人 博客 网 站 


rai 昌 -ed 创建 数据 库 文件 


二 


~ 


本 章 将 综合 运用 本 书 所 学 的 知识 ， 制 作 一 个 “甜蜜 糕 
点 ”网 站 。 它 是 一 个 个 人 博客 网 站 ， 主 要 用 于 体现 个 人 对 
糕点 的 喜爱 。 在 该 网 站 中 可 以 查看 网 站 管理 员 发 布 的 信息 ， 导 
其 他 人 对 信息 的 评论 等 。 该 网 站 为 动态 网 站 ， 需 要 用 到 创 读 
建 数据 库 、 链 接 数 据 源 和 创建 记录 集 等 动态 网 页 知识 。 


人 


加 Ee | 
19.1 ”实例 说 明 


本 章 将 制作 甜蜜 糕点 网 站 ， 使 其 显示 出 网 站 中 发 表 的 所 有 信息 。 该 网 站 不 
同 于 一 般 的 页 面 ， 而 是 由 拥有 用 户 管 理 员 权限 的 用 户 进 行 管理 的 ; 一 般 用 
户 则 只 能 对 信息 进行 查看 和 回复 等 操作 ， 如 图 19-1 所 示 。 


Mrz 


ll 

sin EAT sara 本 到 王 
PE rt 
十- 估 则 二 中 如 30 和 一 
Eo 

WE (2) | EAE (3) 
的 生 开 

i RF mr 二 忆 洒 加 
化 二 和 11 地下 加 本 于 了 到 访 相 下 才 裤 。 tt 反 二 下 ye 下 
分 全 后 由 商人 天 齐 ， 虽 ”相克 下 及 册 邹 人 后 凡 有 疡 并 由 了 

六 (ey | SARE ay 
上 

in BAF 0D sm 
轴 导 信和 和 区 及 扑 李 中， 同 CWOF。 时 信和 01 所 入。 MTN3。 尼 中 车 BN 二。 二 天 和 
TH 

WR (2) | Ai 9) 
本 [10 各 一 者 代 

i A zamra 器 二 本 


TT 
主 ， 定 生 1 再、 地 昌 直 5 


M22 (1) | SAit [四 


se EAF mr 二 ois 


OE Eees- an 
1 刘瑾 占 - 加 此 为 /二 信和 一 本 上、 全 全 所 而 


WS 


下 -SRm Ee 


19-1 甜蜜 糕点 网 站 效果 
出， 光盘 \ 素 材 \ 第 19 章 \cake 
~ 盘 ”光盘 \ 效 果 \ 第 19 章 \cake\index.asp > 


8 -用 wd 国 … 


本 网 站 是 一 个 简单 的 博客 网 站 ， 只 提供 了 发 表 日 志 、 显 示 日 志 、 编 辑 日 志 、 删 除 日 志和 发 表 评 
论 等 功能 。 这 是 一 个 动态 网 站 ,采用 ASP VBScript 进行 编写 。 
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19.2 行业 分 析 


本 例 制作 的 甜蜜 糕点 网 站 属于 个 人 网 站 。 它 是 指 互 联网 上 一 块 固定 的 面向 
全 世界 发 布 消息 的 地 方 。 它 相当 于 布告 栏 ， 用 户 可 以 通过 网 站 来 发 布 自己 
想 要 公开 的 资讯 ， 或 者 利用 网 站 来 提供 相关 的 网 络 服务 。 


个 人 博客 网 站 是 指 个 人 因 某 种 兴趣 、 拥 有 某 种 专业 技术 、 提 供 某 种 服务 或 把 自己 的 作 
品 、 商 品 展示 而 制作 的 具有 独立 空间 域名 的 网 站 。 它 与 一 般 的 商业 网 站 的 不 同 在 于 ， 它 是 
个 人 创建 的 网 页 ， 一 般 不 包含 具有 商业 性 质 的 内 容 ， 也 不 是 个 人 性 质 的 公司 、 组 织 或 机 
构 的 代表 。 

个 人 博客 网 站 的 制作 目的 一 般 是 为 了 分 享 自己 的 兴趣 爱好 ， 在 设计 网 页 时 ， 除 了 要 吸 
访问 者 的 注意 力 外 ， 还 要 体现 出 网 站 的 主题 ， 充 分 表达 出 自己 的 个 人 特色 ， 让 访问 者 通 
过 网 页 了 解 自己 的 性 格 、 爱 好 和 其 他 信息 。 

本 章 制作 的 甜蜜 糕点 网 站 是 一 个 能 够 充分 代表 个 人 特色 的 个 人 博客 网 站 ， 该 网 站 色彩 
丰富 ， 以 文字 和 图 片 的 形式 来 体现 网 站 的 内 容 。 该 网 站 还 有 一 个 特点 就 是 ， 需 要 由 用 户 管 
理 员 权 限 的 用 户 进行 管理 。 因 此 ， 在 设计 该 网 页 时 ， 需 要 先 制 作 一 个 管理 员 登 录 页 面 。 


uu 


19.3 ”操作 思路 


本 例 将 涉及 本 书 讲解 的 很 多 知识 ， 通 过 灵活 运用 这 些 知识 ， 制 作出 别 具 特 
色 的 个 人 网 站 。 下 面 将 对 本 例 的 操作 思路 进行 介绍 ， 以 掌握 制作 的 大 致 
流程 。 


为 更 快 完成 本 例 的 制作 ， 并 尽 可 能 运用 本 书 讲解 的 知识 ， 本 例 的 操作 思路 如 下 。 


-< 
a 
a 
n 

创建 管理 员 登 录 页 面 回 / 
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pp | / 
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创建 数据 库 并 配置 服务 加” 


个 人 网 站 包括 博客 、 个 人 论坛 、 个 人 主页 等 ， 它 是 一 个 可 以 发 布 个 人 信息 和 相关 内 容 的 小 型 
网 站 。 
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19.4 操作 步骤 


制作 动态 网 站 前 ， 应 先 创 建 好 需要 的 数据 库 文 件 ， 并 配置 IIS 服务 器 ， 再 
在 Dreamweaver CS6 中 创建 站 点 ， 包 括 测 试 服务 器 的 配置 ， 最 后 才 开 始 制 
作 各 动态 页 面 。 


19.4.1 创建 数据 库 文 件 
下 面 将 创建 制作 本 例 需要 的 数据 库 。 其 操作 步骤 如 下 : 


人 es 光盘 \ 实 例 演示 \ 第 19 章 \ 创 建 数据 库 文件 要 


国 启 动 Access 2003， 选 择 【文件 】/【 新 建 】 命 令 ， 新 建 一 个 名 为 “myblog” 的 空白 
数据 库 。 

国 在 数据 库 窗口 的 “对 象 ” 列表 框 中 选择 “ 表 ” 选项， 双击 右 侧 的 “使 用 设计 器 创建 表 ” 
选项 。 

俩 打开 “ 表 1: 表 ” 窗 口 ， 在 “字段 名 称 "、“ 数 据 类 型 ”和 “说 明 ” 栏 中 输入 表格 对 应 
的 字段 属性 。 

俩 完成 后 按 “Ctrl+S” 快 捷 键 ， 打 开 “ 另 存 为 ”对 话 框 ， 在 “ 表 名 称 ” 文 本 框 中 输入 表 
格 的 名 称 为 “blog_comments”， 单 击 [ 确定 按钮 ， 如 图 19-2 所 示 。 

国 使 用 相同 的 方法 新 建 “blog_posts” 表 格 ， 并 设置 其 字段 属性 ， 如 图 19-3 所 示 。 


图 19-2 创建 “blog_comments” 表 图 19-3 “blog_posts” 表 
俩 再 使 用 相同 的 方法 新 建 “blog_type” 和 “users” 表格, 并 设置 其 字段 属性 , 如 图 19-4 
和 图 19-5 所 示 。 


国 完 成 后 保存 数据 库 , 并 将 数据 库 复制 到 需要 创建 为 站 点 文件 的 根 目录 中 , 修改 其 扩展 
名 为 “.asa”， 完 成 数据 库 的 创建 。 


默认 状态 下 ,asa 文 件 是 不 允许 被 用 户 修改 的 ,此 时 可 将 其 扩展 名 再 修改 为 .mdb, 使 其 变 为 Access 
数据 库 的 可 编辑 格式 即 可 。 
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图 19-5 “users” 表 


图 19-4 “blog_type” 表 


19.4.2 配置 IIS 并 创建 站 点 
打开 “Internet 信息 服务 器 ”窗口 ， 在 其 中 创建 一 个 名 为 “cake” 的 虚拟 目录 ， 其 本 地 
路 径 为 “F:\DW\ 光 盘 \ 效 果 \ 第 19 章 \cake"。 其 操作 步骤 如 下 : 


见 
es 光盘 \ 实 例 演示 \ 第 19 章 \ 配 置 IIS 并 创建 站 点 
俩 打开 “Internet 信息 服务 ”窗口 (打开 方法 请 参考 第 14 章 )， 在 窗口 左 侧 展 开 “ 网 站 / 


Default Web Site” 目 录 树 ， 在 “Default Web Site” 选 项 上 单 击 鼠标 右键 ， 在 弹出 的 


> 


快捷 菜单 中 选择 “添加 虚拟 目录 ”命令 。 
国 在 打开 的 “添加 虚拟 目录 ”对 话 框 的 “别名 ”文本 框 中 输入 “cake”， 在 “物理 路 径 ” 
确定 


文本 框 中 输入 新 建 的 文件 夹 的 位 置 为 “F:\DW\ 光 一 \ 效 果 \ 第 19 章 \cake”, 单 击 


按钮 ， 如 图 19-6 所 示 。 
俩 关闭 “Internet 信息 服务 ”窗口 ， 启 动 Dreamweaver CS6， 选 择 【 站 点 】/【 新 建 】 
命令 ， 在 打开 的 对 话 框 中 进行 如 图 19-7 所 示 的 本 地 站 点 设置 。 
jad 如 [ee ET EE 本 
rr | grearmweme 和 是 阳 泊 中 全 的 闻 六 他 六。 
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俩 选择 “服务 器 ”选项 卡 ， 在 右 侧 单 击 “ 添 加 新 服务 器 ”按钮 此 ， 在 打开 的 对 话 框 中 
设置 “服务 器 名 称 ” 为 “cake”,“ 连 接 方法 ”为 “本 地 /网 络 *， 再 设置 其 他 参数 ， 如 
图 19-8 所 示 ， 完 成 后 单 击 [ 人 按钮 。 

俩 返回 “服务 器 ”选项 卡 界面 查看 新 建 的 服务 器 ， 然 后 取消 选中 “远程 ” 栏 中 的 复 选 框 ， 
选中 “测试 ” 栏 中 对 应 的 复 选 框 ， 单 击 [名 se 按钮 完成 设置 ， 如 图 19-9 所 示 。 
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图 19-8 设置 服务 器 图 19-9 查看 新 建 的 服务 器 
19.4.3 ”创建 用 户 登 录 页 面 
下 面 制作 用 户 登录 验证 页 面 。 其 操作 步骤 如 下 : 
4 见 
ye: 光盘 \ 实 例 演示 \ 第 19 章 \ 创 建 用 户 登 录 界 面 > 


国 在 Dreamweaver CS6 中 打开 “F:\DW\ 光 盘 \ 效 果 \ 第 19 章 \cake” 文 件 夹 中 的 “login. 
asp” 网 页 ， 然 后 选择 【窗口 〗 /【 和 数据库】 命令， 打开“ 数据库” 面板 。 

国 单 击 面板 上 方 的 图 按钮 ， 在 弹出 的 下 拉 菜 单 中 选择 “ 自 定义 连接 字符 串 ” 命 令 ， 如 
图 19-10 所 示 。 

全 打开 “ 自 定义 连接 字符 串 ” 对 话 框 ， 在 “连接 名 称 ” 文 本 框 中 输入 “conn"， 在 “连接 字符 串 ” 
文本 框 中 输入 “"Provider=Microsoft.Jet.OLEDB.4.0;Data Source="&Server.MapPath("/ myblog. 
aSa")”， 选 中 回 使 用 测 汪 服务 器 上 的 豫 动 程 序 单 选 按钮 ， 如 图 19-11 所 示 。 


ee 
图 19-10 选择 命令 图 19-11 自 定义 连接 字符 串 


全 单 击 ERE 按 钮 ， 查 看 数据 库 是 否 连接 成 功 ， 然 后 单 击 世 as] 按钮 返回 “ 自 定义 连接 字 


如 果 在 配置 IIS 时 是 直接 修改 的 默认 站 点 的 本 地 路 径 , 则 在 “URL 前 缓 ”文本 框 中 只 需 输 入 “http:// 
localhost/” 即 可 。 
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让 定义 连 和 字符 所 


连接 名 称 conn | 
连 将 字 符 串 : a 5o1 
Dreamweaver 应 这 娄 加 对 


图 19-12 测试 连接 是 否 成 功 


全 打开 “服务 器 行为 ”面板 ， 单 击 面板 上 方 的 国 按 钮 ， 在 弹出 的 下 拉 菜 单 中 选择 【用 
户 身份 验证 〗】/【 登 录 有 用户】 命令， 打开 “登录 用 户 ” 对 话 框 。 

俩 在 “使 用 连接 验证 ”下 拉 列表 框 中 选择 “conn” 选 项 ， 在 “表格 ”下 拉 列 表 框 中 选 
择 “users” 选 项 ， 在 “用 户 名 列 ” 下 拉 列 表 框 中 选择 “username” 选 项 ， 在 “密码 
列 ” 下 拉 列 表 框 中 选中 “password” 选 项 ， 在 “如 果 登 录 成 功 ， 转 到 ”文本 框 中 输 
入 “index.asp”, 在 “如 果 登 录 失 败 , 转 到 "文本 框 中 输入 “login.asp?action=relogin”， 
如 图 19-13 所 示 。 

俩 单 击 EEEE 汪 按钮 完成 “登录 用 户 ” 服 务 器 行为 的 添加 ， 然 后 将 鼠标 光标 定位 在 编辑 窗 
口中 红色 文本 “登录 错误 : 必须 输入 正确 的 用 户 名 及 密码 , 请 重 试 !1” 前 , 选择 “ASP” 
插入 栏 ， 单 击 而 按钮 。 

国 此 时 ， 将 自动 添加 <%if Then%> 代 码 ， 将 鼠标 光标 定位 在 光标 闪烁 的 位 置 ， 输 入 代 
码 “Trim(Request.QueryString("action"))="relogin""”， 如 图 19-14 所 示 。 

国保 存 网 页 ， 完成 页 面 的 制作 。 


回 机 到 前 一 个 URL 部 曲 它 存 在 ) 
果 和 了 闪 民 ， 转 于 [io aspTsctianErsiogin [5 


基于 从 下 项 限 村 访问 : 刘 万 户 省 和 安 再 06 » 
三 用户 省 、 安 再 和 访 疝 级 中 is 
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19-13 “登录 用 户 ” 对 话 框 19-14 添加 代码 


19.4.4 编辑 “日 志 导航 ”和 “最 近 心 情 ” 


本 页 面 需要 为 “日 志 导航 ”和 “最 近 心 情 ” 两 个 栏目 添加 动态 内 容 ， 应 先 创建 记录 集 ， 


(Er 


再 添加 动态 文本 等 。 其 操作 步骤 如 下 : 


见 
如: 光盘 \ 实 例 演示 \ 第 19 章 \ 编 辑 “ 日 志 导航 ”和 “最 近 心 情 ” » 


国 用 Dreamweaver CS6 打开 “right.asp” 网页， 选择 【窗口 ] 代 绑 定 了 命令 ， 打 开 “ 绑 
定 ” 面 板 。 单 击 面板 上 方 的 员 按 钮 ， 在 弹出 的 下 拉 菜 单 中 选择 “记录 集 (查询 )” 
命令 。 

俩 打开 “记录 集 ” 对 话 框 ， 在 “名 称 ” 文 本 框 中 输入 “rs_type"”， 在 “连接 ”下 拉 列 表 
框 中 选择 “conn” 选 项 , 在 “表格 ”下 拉 列 表 框 中 选择 “blog_type” 选 项 , 单 击 EE 驳 定 < 
按钮 ， 如 图 19-15 所 示 。 

国 先 中 编辑 窗口 中 的 “咖啡 心情 ” 文本 ， 单 击 编辑 窗口 左上 角 的 切 可 按钮 切换 到 代码 视 
图 ， 从 “ 绑 定 ”面板 将 “type_name” 字 段 拖 动 到 选中 的 文本 上 后 释放 和 鼠标， 如 


图 19-16 所 示 。 
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图 19-15 定义 记录 集 19-16 添加 动态 文本 
俩 选中 其 后 文本 “(1)” 中 的 “1?， 从 “ 绑 定 ”面板 中 将 “post_count” 字 段 拖 动 到 选 
中 的 文本 上 后 释放 鼠标 。 


将 鼠标 光标 定位 在 “<a href="index.asp?type_id=” 后 ,从 “ 绑 定 "面板 中 将 “type_id” 
字段 拖 动 到 光标 处 后 释放 鼠标 ， 然 后 选中 文本 所 在 的 整个 列表 项 ， 如 图 19-17 所 示 。 
园 挝 择 “数据” 插入 栏 , 单 击 “ 重 复 区 域 ”按钮 图, 在 打开 的 “重复 区 域 ”对 i i 
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19-17 选择 整个 列表 图 19-18 “重复 区 域 ”对 话 框 
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在 “index.asp?type_id=” 后 绑 定 动态 文本 是 为 了 单 击 该 链接 时 ， 打 开 网 页 的 同时 为 其 传递 参数 
“type_id” 及 值 ， 首 页 “index.asp” 则 根据 “type id” 的 值 只 显示 该 类 型 的 日 志 。 
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俩 单 击 EEE 汪 按钮 ,完成 重复 区 域 的 创建 。 然 后 使 用 相同 的 方法 创建 记录 集 “rs_new”， 
其 “记录 集 ” 对 话 框 的 设置 如 图 19-19 所 示 。 然 后 单 击 @ 友 82 十 按钮 ， 完 成 记录 集 
“rs_new” 的 创建 。 

全 选中 文本 “华灯 初 上 的 城 ?>， 从 “ 绑 定 ”面板 中 将 “title” 字 段 拖 动 到 选中 的 文本 上 
后 释放 鼠标 ; 选中 “2013-5-23 21:36:52?， 从 “ 绑 定 ” 面 板 中 将 “created” 字 段 拖 
动 到 选中 的 文本 上 后 释放 鼠标 ; 将 鼠标 光标 定位 在 “info.asp?post_id=” 后 ， 从 “ 绑 
定 ” 面 板 中 将 “post id” 字段 拖 动 到 定位 处 后 释放 鼠标 。 

国 完 成 后 选中 文本 所 在 的 整个 列表 项 ， 如 图 19-20 所 示 。 
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图 19-19 创建 记录 集 “rs_new?” 图 19-20 选择 整个 列表 项 


人 园 为 共 创 建 重复 区 域 ， 其 “重复 区 域 ” 对 
话 框 的 设置 如 图 19-21 所 示 。 完 成 后 单 CE 
击 世 王 本 楼 钮 完成 重复 区 域 的 创建 EE 二 | 二 

国 拉 “CtritHome” 快捷 键 返回 到 代码 视 © mmm 
图 顶部 ， 删 除 “<%@LANGUAGE=" 
VBSCRIPT"%>” 代码 后 进行 保存 ， 完 
成 整个 “right.asp” 页 面 的 制作 。 


19.4.5 ”制作 博客 首页 


首页 “index.asp” 的 主要 功能 是 显示 日 志 列 表 ， 默 认 显 示 所 有 类 型 的 日 志 ， 每 页 显示 
10 条 记录 ， 可 能 记录 会 很 多 ， 因 此 需要 制作 分 页 。 其 操作 步骤 如 下 : 


19-21 “重复 区 域 ” 对 话 框 


见 
es 光盘 \ 实 例 演示 \ 第 19 章 \ 制 作 博 客 首页 > 
> 一 


国 在 Dreamweaver CS6 中 打开 “index.asp” 网 页 ， 创建 记录 集 “rs_list”"， 其 设置 如 
图 19-22 所 示 。 
俩 将 鼠标 光标 定位 在 “管理 员 登 录 ” 前 ， 切 换 到 代码 视图 ， 再 将 鼠标 光标 定位 在 “<a 


“重复 区 域 ” 对 话 框 中 的 设置 是 只 显示 5 条 记录 ， 而 在 创建 “rs_new” 记 录 集 时 根据 创建 日 志 
的 时 间 进 行 降序 排列 。 因 此 ， 这 里 会 显示 最 新 的 5 条 日 志 标 题 。 
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href="login.asp" target=" top"> 管 理 员 登 录 ” 前 ， 输 入 代码 “<%if Session("MM_ 
Username")="" then%>”， 然 后 将 鼠标 光标 定位 在 “管理 员 登 录 </a>” 后 ， 输 入 代码 
“<% Else %>”， 最 后 将 鼠标 光标 定位 在 “注销 退出 </A>” 后 , 输入 代码 “<% End 上 f 
%>”， 完 成 后 的 效果 如 图 19-23 所 示 。 
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图 19-23 输入 代码 


全 选中 “[ 漫 旅 脚印 ]” 文 本 前 的 “index.asp?type_id=4” 文 本 中 的 “4” 文 本， 从 “ 绑 
定 ”面板 中 将 “rs_list” 记 录 集 的 “type_id” 拖 动 到 选中 文本 上 后 释放 鼠标 。 

俩 选中 “华灯 初 上 的 城 ”文本 前 的 “info.asp?post_id=5” 文 本 中 的 “5” 文本， 从 “ 绪 
定 ” 面 板 中 将 “rs_list” 记 录 集 的 “post_id” 拖 动 到 选中 文本 上 后 释放 鼠标 。 

人 图 选 中 “华灯 初 上 的 城 ”文本 ， 从 “ 绑 定 ”面板 中 将 “rs_list” 记 录 集 的 “title” 拖 动 
到 选中 文本 上 后 释放 鼠标 。 

图 选中 “admin 发 表 于 2013-5-23 21:36:52” 文 本 中 的 “admin” 文 本 ， 从 “ 绑 定 ” 
面板 中 将 “rs_list” 记 录 集 的 “usr_name” 拖 动 到 选中 文本 上 后 释放 鼠标 。 

鲍 选 中 “admin 发 表 于 2013-5-23 21:36:52” 文 本 中 的 “2013-5-23 21:36:52” 文 
本 ， 从 “ 绑 定 ”面板 中 将 “rs_list” 记 录 集 的 “created” 拖 动 到 选中 文本 上 后 释放 鼠标 。 

俩 选中 “在 即将 被 黑夜 扼 埋 之 际 ， 暗 蓝 色 的 天 幕 生生 的 扯 起 巨大 的 衬 布 ， 把 城市 的 华灯 
之 像 泻 染 的 无 比 妩 媚 ， 模 糊 之 中 上 暗自 品味 那 流 消 的 灯 束 ~~ 一 切 的 影像 在 所 谓 的 调子 
中 不 伦 不 类 ,只 知道 行进 在 流光 溢 彩 的 街景 中 .……” 文本 , 从 “ 绑 定 ”面板 中 将 “rs_list” 
记录 集 的 “body” 拖 动 到 选中 文本 上 后 释放 鼠标 。 

贺 选 中 “编辑 日 志 ” 文 本 前 的 “editasp?post_id=5&ampitype_id=4” 文 本 中 的 “5”， 
从 “ 绑 定 ”面板 中 将 “rs_list” 记 录 集 的 “post_id” 拖 动 到 选中 文本 上 后 释放 鼠标 ; 
选中 “edit.asp?post_id=5&amp;type_id=4” 文 本 中 的 “4”, 从 “ 绑 定 ?面板 中 将 “rs_list” 
记录 集 的 “type_id” 拖 动 到 选中 文本 上 后 释放 鼠标 。 

园 二 + “del.asp?post_id=5” 文 本 中 的 “5”， 从 “ 绑 定 ”面板 中 将 “rs_list” 记 录 集 
的 “post id” 拖 动 到 选中 文本 上 后 释放 鼠标 。 


用 户 也 可 通过 查找 和 替换 的 方法 来 进行 代码 的 修改 。 


ES 
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人 @ 国 分 别 选 中 两 处 “info.asp?post_id=5” 文 本 中 的 “5”， 从 “ 绑 定 ”面板 中 将 “rs_list? 
记录 集 的 “post_id” 拖 动 到 选中 文本 上 后 释放 鼠标 。 

国 先 中“ 风 读 全 文 (8) 文 本 中 的 “8”, 从 “ 绑 定 "面板 中 将 “rs_list” 记 录 集 的 “clickcount” 

。” 赵 动 到 选中 文本 上 后 释放 鼠标 。 

国 近 中 “发 表 评论 (0)” 文 本 中 的 “0"， 从 “ 绑 定 ”面板 中 将 “rs_list” 记 录 集 的 
“comments_count” 拖 动 到 选中 文本 上 后 释放 鼠标 。 

例 单 击 EEE 按 钮 切换 到 设计 视图 , 选中 如 图 19-24 所 示 的 整个 表格 ,为 其 创建 重复 区 域 ， 
其 “重复 区 域 ”对 话 框 的 设置 如 图 19-25 所 示 。 完 成 后 单 击 EEBEa 按 钮 完成 重复 区 

域 的 创建 ， 即 完成 列表 显示 区 域 的 制作 。 


19-24 选择 表格 图 19-25 “重复 区 域 ” 对 话 框 


国 先 中 分 页 区 中 黑色 的 “首页 ”文本 ， 按 “CtrltF9” 快 捷 键 打开 “服务 器 行为 ”面板 ， 
单 击 面板 上 方 的 员 按 钮 ， 在 弹出 的 下 拉 菜 单 中 选择 【记录 集 分 页 〗/【 移 至 第 一 条 记 
录 】 命 令 , 打开 “ 移 至 第 一 条 记录 ”对 话 框 , 进行 如 图 19-26 所 示 的 设置 . 单 击 匡 栈 导 
按钮 ， 完 成 “首页 ”链接 的 创建 。 

例 寺 中 时 名 “上 一 页 ”文本 ， 在 “服务 器 行为 ”面板 中 单 击 面板 上 方 的 出 按钮 ， 在 弹 
出 的 下 拉 菜 单 中 选择 【记录 集 分 页 〗/【 移 至 前 一 条 记录 】 了 命令 ， 打 开 “ 移 至 前 一 条 
记录 ”对 话 框 ， 进 行 如 图 19-27 所 示 的 设置 。 单 击 匡 琵 司 按钮 ， 完 成 “上 一 页 ” 链 
接 的 创建 。 


图 19-26 “ 移 至 第 一 条 记录 ”对 话 框 ”图 19-27 “ 移 至 前 一 条 记录 ”对 话 框 

国 使 用 相同 的 方法 ， 分 别 为 黑色 的 “下 一 页 ”和 “ 尾 页 ”文本 添加 “记录 集 分 页 / 移 至 
下 一 条 记录 ”和 “记录 集 分 页 / 移 至 最 后 一 条 记录 ”行为 。 

例 过 中 黑色 文本 “首页 上 一 页 ”， 在 “数据 ”插入 栏 中 单 击 “显示 区 域 ”按钮 围 后 的 民 按 
钮 ， 在 弹出 的 菜单 中 选择 “如 果 不 是 第 一 页 则 显示 ”命令 ， 打 开 “ 如 果 不 是 第 一 条 记 
录 则 显示 区 域 ” 对 话 框 ， 进 行 如 图 19-28 所 示 的 设置 。 单 击 EEBE 洒 按钮 完成 设置 。 

例 选 中 灰色 文本 “首页 上 一 页 ”， 在 “数据 ”插入 栏 中 单 击 “ 显 示 区 域 ” 按 钮 画 后 的 民 

按钮， 在 弹出 的 菜单 中 选择 “如 果 是 第 一 页 则 显示 ”命令 ， 打 开 “ 如 果 为 第 一 条 记录 

则 显示 区 域 ”对 话 框 ， 进 行 如 图 19-29 所 示 的 设置 。 单 击 EEBE 汪 按钮 完成 设置 。 


加 Ee | 


如 果 不 是 第 一 冬 记录 则 显示 区 域 如 果 为 第 一 条 记录 则 旦 示 区 域 
| ED)| “Ed 
取消 
[0[ 设 轩 ] [器 设 辕 ] 


图 19-28 设置 黑色 “首页 上 一 页 ”的 显示 图 19-29 设置 灰色 “首页 上 一 页 ”的 显示 


国 使 用 相同 的 方法 为 黑色 “下 一 页 尾 页 ”和 灰色 “下 一 页 尾 页 ”文本 设置 显示 情况 ， 
其 设置 对 话 框 分 别 如 图 19-30 和 图 19-31 所 示 。 


如 果 不 是 最 后 一 条 记录 则 显示 区 域 


记录 集 |xsclist 加 


图 19-30 设置 黑色 “下 一 页 尾 页 ”的 显示 。 图 19-31 设置 灰色 “下 一 页 尾 页 ”的 显示 
国 选中“ 漫 旅 脚印 " 文本 , 切换 到 代码 视图 , 在 光标 处 手动 添加 代码 ,如 图 19-32 所 示 。 
国 必 鼠标 光标 定位 在 “<A href="post.asp" target=_top> 发 表 日 志 </A>” 代 码 前 ， 输 入 

代码 “<%if Session("MM_Username") =(rs_list.Fields.ltem("usr_name").Value) 
then%>”， 再 将 鼠标 光标 定位 在 “删除 日 志 </A> |” 后 ， 输 入 代码 “<%End IF%>”， 
如 图 19-33 所 示 。 


19-32 手动 添加 代码 19-33 ”手动 输入 代码 


19.4.6 ”制作 信息 显示 页 面 


信息 显示 页 面 “Info.asp” 是 显示 日 志 全 部 内 容 和 发 表 评 论 的 页 面 ， 其 中 有 很 多 地 方 与 
首页 的 制作 方法 相同 ， 如 管理 员 登 录 、 注 销 退 出 部 分 和 显示 日 志 的 部 分 等 ， 这 些 部 分 的 内 
容 请 参考 首页 的 制作 方法 进行 制作 ， 这 里 不 再 次 述 。 制 作 本 页 面 的 操作 步骤 如 下 : 


见 
ye 光盘 \ 实 例 演示 \ 第 19 章 \ 制 作 信息 显示 页 面 > 


国 左 Dreamweaver CS6 中 打开 “info.asp” 网 页 ， 新 建 记 录 集 “rs_list?， 其 “记录 集 ” 
对 话 框 如 图 19-34 所 示 。 单 击 匡 酶 本 按钮 ， 完 成 记录 集 的 创建 。 

国 参 照 首页 的 制作 方法 ， 完成 管理 员 登 录 、 注 销 退 出 部 分 和 日 志 显示 部 分 的 动态 内 容 的 
制作 ， 完 成 后 的 效果 如 图 19-35 所 示 。 


代码 “<%=trim(request("post id"))%>” 中 “request(“post id”)” 的 作用 是 获取 传递 到 本 页 面 
的 “post_ id” 参数 的 值 ，trim() 函 数 的 作用 是 删除 获取 值 首 尾 两 端的 空格 符 ， 使 用 该 函数 可 以 保证 数 
据 的 安全 。 


- 
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记录 条 


1 .时 发 表 日 志 | 编 得 日 志 | 出 用 日 志 | 

19-34 “记录 集 ” 对 话 框 图 19-35 完成 后 的 日 志 内 容 区 

全 创建 记录 集 “rs_comments”, 其 “记录 集 ”对 话 框 如 图 19-36 所 示 , 完成 后 单 击 匡 囊 瑟 
按钮 关闭 “记录 集 ” 对 话 框 。 

辆 选中 “2013-5-23 23:59:42” 文 本 ， 从 “ 绑 定 ”面板 中 将 “rs_comments” 记 录 集 
的 “created” 字 段 拖 动 到 选中 文本 上 后 释放 鼠标 。 

俩 选 中 “幸好 不 是 奶油 小 生 ， 和 否则 你 会 被 扁 死 的 ， 哈 哈哈 1144” 文本 ， 从 “ 绑 定 ”面板 
中 将 “rs_comments” 记 录 集 的 “body” 字 段 拖 动 到 选中 文本 上 后 释放 鼠标 。 

园 选 中 评论 所 在 的 表格 ,并 创建 重复 区 域 ,其 对 话 框 的 设置 如 图 19-37 所 示 。 完 成 后 单 
击 匡 本 本 按钮 关闭 “重复 区 域 ”对 话 框 。 


[rs_conments 


D [10 jaa 


19-36 “记录 集 ” 对 话 框 图 19-37 设置 重复 区 域 

国 远 中 “添加 评论 ”按钮 后 的 隐藏 域 ， 打 开 “ 属 性 ”面板 ， 在 “ 值 ”文本 框 中 输入 
“<%=trim(request("post_id"))%>” 并 按 “Enter” 键 确认 。 

国 在 “应 用 程序 ”插入 栏 中 单 击 员 按钮 ， 
在 弹出 的 下 拉 菜 单 中 选择 “插入 记录 ” 
命令 ， 打 开 “ 插 入 记录 ”对 话 框 。 

图 在 “连接 ”下 拉 列 表 框 中 选择 “conn” 
选项 ， 在 “插入 到 表格 ”下 拉 列 表 框 中 
选择 “blog_comments” 选 项 ， 在 “ 插 
入 后 , 转 到 ”文本 框 中 输入 “info.asp”， 
其 余 保持 默认 设置 ， 如 图 19-38 所 示 。 
单 击 匡 栈 辐 按钮 完成 插入 记录 的 操作 .。 19-38 “插入 记录 ”对 话 框 


在 “ 绑 定 ”面板 中 双击 已 经 创建 的 记录 集 ， 可 打开 “记录 集 ” 对 话 框 ， 在 其 中 可 以 对 记录 集 进 
行 修改 。 


总 | 


保存 网 页 ， 完 成 整个 “info.asp” 页 面 的 制作 。 


19.5 “拓展 练习 


为 了 使 用 户 对 该 网 站 的 制作 方法 有 更 进一步 的 了 解 ， 下 面 以 制作 日 志 发 布 
页 面 和 日 志 编辑 页 面 为 例 ， 继 续 完成 该 网 站 的 制作 。 


19.5.1 制作 日 志 发 布 页 面 


日 志 发 布 页 面 ( post.asp ) 的 制作 方法 较为 简单 ， 
需 使 用 “插入 记录 ”功能 将 需要 添加 的 表格 内 容 添 
加 到 数据 库 中 即 可 实现 。 该 页 面 主要 用 于 发 布 心情 ， 人 
主要 有 “日 志 类 别 "、“ 标 题 ” 和 “内 容 ”3 个 主要 | 人 ? 
部 分 的 内 容 ， 即 对 数据 库 中 的 “blog_posts” 表 中 的 疾 | 


9 加 # 页 全 


内 容 进行 添加 。 如 图 19-39 所 示 为 日 志 发 布 页 面 的 
主要 内 容 。 


EE 


图 19-39 日 志 发 布 页 面 效果 


光盘 \ 素 材 \ 第 19 章 \coke\post.asp 
网 ”光盘 \ 效 果 \ 第 19 章 \ coke\post.asp 
前 ”光盘 \ 实 例 演示 \ 第 19 寓 \ 制 作 目下 发 布 网 页 > 


该 练习 的 操作 思路 如 下 。 


19.5.2 ”制作 编辑 日 志 页 面 


日 志 编辑 页 面 ( edit.asp ) 使 用 “更 新 记录 ”功能 即 可 实现 ， 该 页 面 需要 管理 员 登 录 后 
才能 进行 操作 ， 因 此 需 添加 “限制 对 页 的 访问 "， 其 效果 如 图 19-40 所 示 。 


0 -用 Dd 国 … 


设置 用 户 身份 验证 时 ， 需 在 “服务 器 行为 ”面板 中 选择 【用 户 身 份 验证 〗/【 限 制 对 页 的 访问 】 
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日 志 共 王 : 
咖啡 心情 


要: 
| 华灯 初 上 的 城 

内 容 ; 

庄 时 六 标记 撞 直 之 际 ， 量 至 芭 的 天 每 生生 的 扯 起 巨大 
的 衬 布 ， 把 城市 的 华灯 之 像 浑 染 的 无 比 玩 媚 ， 模 精 之 中 
| 暗自 品味 那 流 消 的 灯 东 

一 切 的 影像 在 所 齐 的 调子 中 不 伦 不 类 ， 只 知 逢 行进 在 流 
| 光 沽 移 的 街 具 中 


图 19-40 ”编辑 日 志 网 页 效果 


19 章 \cakevedit.asp 
19 章 \cake\edit.html 


网 ”光盘 \ 效 果 \ 第 
NN 世 N3% 盘 ”光盘 \ 实 例 演示 \ 第 19 章 \ 制 作 编辑 日 志 页 面 >>> 


该 练习 的 操作 思路 如 下 。 


根据 本 例 的 制作 方法 ， 
页 面 等 。 


用 户 还 可 以 对 网 站 进行 完善 ， 如 制作 删除 日 志 的 页 面 、 制 作 注销 登录 的 


